Dijit Selects provide and consistent look and feel on different browsers and platforms
maxHeight=-1 is used so the select adjusts to the container box, allowing scrolling for a long list of options in a small container.
Expands on default Dijit select to add images and/or a second line containing meta information.
Multi select Not recommended
Consider using other select forms before introducing multi select as these should be used sparingly. It is not the most effective way to display large amounts of data.
If you must create a multi select, define a regular select with options. Then, define the
data-dojo-type of the element to
Make sure you add the following attributes:
dropDown="true" multiple="true" labelText="Select options"
Days of week select Not recommended
To create a days of week select, define it like a regular select. Add the attribute
data-dojo-type with the following value:
If you want all checkboxes selected by default add the attribute
Native Selects are useful when browser defaults work better than Dijit Selects. For example, on mobile devices the native selects are better styled for interactions and are tightly coupled with the OS itself.
Native selects can be styled to look like Dijit Selects on WebKit browsers only.
Multiple options are selectable with the boolean
Text inputs are accompanied by a
label and wrapped inside a
:focus styles follow our brand colors.
Required fields can be indicated by adding the
required class to the associated label.
Text input with currency attached
zin-lv2 classes with the
span to generate input fields with a currency icon. Use
c-currencyInput class on the input to create the correct padding to account for the symbol to the right of the input field. Also, use
currency to get the User's currency symbol
Text input with suffix symbol attached
zin-lv2 classes with the
span to generate input fields with a suffix icon. Use
c-suffixInput class on the input to create the correct padding to account for the symbol to the right of the input field. Last, add
position--relative to the
size1of2 class for sizing the container will help with
Text input with field help
field-help to better explain an input field and to guide the user through the form filling process.
field-help right after the
input field inside a
field-wrapper. This will keep all the elements together and in context.
Input fields that have not passed validation are updated with an
invalid-error message is placed right after the
Field validation is handled by the backend, and the styles and attributes required to style the errors are provided by the controller.
This component takes an existing full list, and removes items based on criteria that match/don't match.
Include a custom placeholder by setting
placeholder:'Filtered Search' to
Publish a topic by passing
searchTopic, then filter results by subscribing to the topic in the view's corresponding js.
This input can be found in several editing experiences.
noColorEnabled prop to make removing a color an option. Pass a default color value with
Dijit Date Text Box
This is a dijit element we have styled to match other patterns.
constraints="" to customize a variety of options such as date format, min, and max.
Dijit radio & checkboxes
Radio buttons and checkboxes are defined using Dijit plugins –
checkbox class to the
label that wraps the
disabled attribute to disable the input element and to apply appropriate styles.
Radio & checkbox description
To add a description to a checkbox or a radio button, declare
checkbox-description right after the
label should wrap both—the input element and the description block.
This style controls the hover/selected/focus states of a choice card which uses an
<input> of type
The switch behaves like a checkbox — allowing the user to toggle an on or off state as they would on a mobile device.
Just make sure you include
As with most inputs, attributes such as
disabled work out of the box.
You can assign a title attribute via
If you want to check the status of the switch. Use
We use the
HorizontalSlider dijit component to represent the range input.
Useful for hiding optional subforms or extra content.
Specify the id of the hidden dom element you want to toggle as the first parameter of the disclosureElement function.