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.
To create a multi select, define a regular select with options. Then, define the data-dojo-type of the element to data-dojo-type="dojox/form/CheckedMultiSelect"
Make sure you add the following attributes: dropDown="true" multiple="true" labelText="Select options"
Days of week select
To create a days of week select, define it like a regular select. Add the attribute data-dojo-type with the following value: mojo/widgets/input/DaysWeek
If you want all checkboxes selected by default add the attribute data-dojo-props="selectAll:'true'"
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.
Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :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
Combine position--absolute , c-currencyInput--symbol, and 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 mojo/user property currency to get the User's currency symbol
Text input with suffix symbol attached
Combine position--absolute, c-suffixInput--symbol, and 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 field-wrapper and size1of2 class for sizing the container will help with max-width of input elements.