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.

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 data-dojo-type="dojox/form/CheckedMultiSelect"

Make sure you add the following attributes: dropDown="true" multiple="true" labelText="Select options"

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.

Multiple options are selectable with the boolean multiple attribute.

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.

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

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.

Combine form-inline and with-button classes with the field-wrapper to generate input fields attached to inline buttons.

Use field-help to better explain an input field and to guide the user through the form filling process.

Declare the 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 class.

Like field-help, the invalid-error message is placed right after the input field.

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 data-dojo-props.

Publish a topic by passing searchTopic, then filter results by subscribing to the topic in the view's corresponding js.

This is our take on a multi-value input. Created as a Dojo widget, the tag list input is designed to be keyboard navigable and adopt our input patterns.

Configure the operatorOptions within data-dojo-props to optionally include a select statement at the start.

This input can be found in several editing experiences.

Use the noColorEnabled prop to make removing a color an option. Pass a default color value with value prop.

This is a dijit element we have styled to match other patterns.

Use the constraints="" to customize a variety of options such as date format, min, and max.

Radio buttons and checkboxes are defined using Dijit plugins – dijit/form/RadioButton and dijit/form/CheckBox.

Add radio or checkbox class to the label that wraps the input element.

Use the disabled attribute to disable the input element and to apply appropriate styles.

To add a description to a checkbox or a radio button, declare radio-description or checkbox-description right after the input element.

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 checkbox or radio.

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 "mojo/widgets/Switch".

As with most inputs, attributes such as disabled work out of the box.

You can assign a title attribute via dojo-data-props

If you want to check the status of the switch. Use registry.byId('switchId')switchInputNode.checked;.

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.