Form Elements

Buttons

Buttons are categorized by style (standard, primary, and primary variants) and size (regular and large).

Regular buttons are 32px high with a font size of 13px. Large buttons are 48px high with a font size of 15px. We don't use large buttons often.

You can create buttons using the button HTML tag accompanied by the button class.

To make a primary action button, combine p0 with the button class.

The classes p1 and p2 make blue and red buttons respectively. These buttons have specific use cases and should be used sparingly.

Anchor and input buttons

To style an anchor (a) tag as a button use the button class.

To style an input as a button use the button class and define a label by adding a value attribute.

Loading buttons

These type of buttons are used when we use AJAX requests to retrieve or store information without leaving the page. We want to provide feedback to the user and let them know the action is in progress.

Add the class button-loading to the button element.

The button must have an onclick event associated with an AJAX call. While in progress add the button-loading class to the button. When the AJAX call is done, remove it. Is advisable to add the attribute disabled to the button element as well and remove if when the AJAX request is done processing.

Button groups

Buttons are usually grouped when they are related by function. For example, in paging controls for previous-next buttons.

Wrap two or more buttons using the button-group class.

Adding the regular class to style like the example. A dark style is also available.

Combo button

MailChimp
Eep eep!
Hoo hoo!

Combo buttons are preferred when more than one action is associated with a button. The primary action is visible and available on the button itself, while the secondary actions are accessed through the drop-down menu.

Combo buttons are created using Dijit's dijit/form/ComboButton and secondary actions are defined inside dijit/DropDownMenu using dijit/MenuItems.

Dijit selects

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.

Info selects

Expands on default Dijit select to add images and/or a second line containing meta information.

Native selects

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.

Disclosure element

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.

Text input

Personal information

Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

Text input with button attached

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

Text input with field help

Personal information
Please use your real name.

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.

Validation feedback

Personal information
First name is a required field.

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.

Tag input

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.

Dijit Date Text Box

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.

Dijit radio & checkboxes

Radio

Checkbox

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.

Radio & checkbox description

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.

Choice Cards

Radios

Checkboxes

This style controls the hover/selected/focus states of a choice card which uses an <input> of type checkbox or radio.

BYOL (Bring Your Own Layout). Feel free to use CSS Grid, flexbox, or any other method to position the cards.

Switch

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;.

Small switch

In order to have smaller version of the switch just add 'switch-small' to the sizeClass attribute in data-dojo-props

For example: data-dojo-props="sizeClass:'switch-small'"

Multi select

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'"