Form Elements
Dijit select
Select an option |
<select maxheight="-1" data-dojo-type="dijit/form/Select"> <option value="">Select an option</option> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select>
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 select
Select an option |
x
<select maxheight="-1" data-dojo-type="mojo/widgets/input/InfoSelect" class="!margin--lv0"> <option value="">Select an option</option> <option value="1" data-image-src="http://static.tumblr.com/e398d8970b1aaceb212e4aa82e7a903c/t0kicoz/ntOnwbytv/tumblr_static_44if4mimmwysw0ssoowg4ogcw.png">Option 1</option> <option value="2" data-meta="25,001 subscribers" data-image-src="http://static.tumblr.com/e398d8970b1aaceb212e4aa82e7a903c/t0kicoz/ntOnwbytv/tumblr_static_44if4mimmwysw0ssoowg4ogcw.png">Option 2</option> <option value="3">Eleven</option> <option value="4">So wow, much options</option> </select>
Expands on default Dijit select to add images and/or a second line containing meta information.
Multi select Not recommended
▼ |
x
<select id="test-multiselect" name="test-multiselect" dropdown="true" multiple="true" labeltext="Select options" data-dojo-type="dojox/form/CheckedMultiSelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
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"
Days of week select Not recommended
▼ |
x
<select id="days-sent" name="days-sent" data-dojo-props="selectAll:'true'" data-dojo-type="mojo/widgets/input/DaysWeek"></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 select
x
<select> <option value="">Select an option</option> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select>
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 input
x
<fieldset>
<legend>Personal information</legend>
<label class="required">First name</label>
<input type="text" placeholder="" class="av-text">
</fieldset>
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
x
<div class="field-wrapper">
<span class="position--absolute c-currencyInput--symbol zin-lv2">%</span>
<input class="c-currencyInput av-number" type="number" value="" placeholder="10.00">
</div>
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
x
<div class="field-wrapper">
<div class="position--relative">
<span class="position--absolute c-suffixInput--symbol zin-lv2">%</span>
<input class="c-suffixInput av-number" type="number" value="" placeholder="5.4%">
</div>
</div>
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.
Text input with field help
x
<fieldset>
<legend>Personal information</legend>
<div class="field-wrapper">
<label>First name</label>
<input type="text" name="fname" class="av-text" id="fname">
<div class="field-help">Don't forget to use your real name please.
</div>
</div>
</fieldset>
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
x
<fieldset>
<legend>Personal information</legend>
<div class="field-wrapper">
<label>First name</label>
<input type="text" name="fname" class="invalid av-text" id="fname">
<div class="invalid-error">First name is a required field.
</div>
</div>
</fieldset>
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.
Filtered Search
x
<div data-dojo-type="mojo/widgets/FilteredSearch" data-dojo-props="placeholder:'Filtered Search', searchTopic:'allthethings'">
</div>
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.
Color
x
<div data-dojo-type="mojo/widgets/input/Color" data-dojo-attach-point="colorInput">
</div>
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.
Dijit Date Text Box
x
<input type="text" data-dojo-type="dijit/form/DateTextBox" constraints="{ datePattern:'MMMM d yyy', min:'2025-02-07' }" id="example-date" name="example-date" class="av-text">
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
x
## Radio
<label class="radio"> <input name="radio1" type="radio" data-dojo-type="dijit/form/RadioButton" checked class="av-radio"> Track plain-text clicks </label>
## Radio disabled
<label class="radio"> <input name="radio-disabled" type="radio" data-dojo-type="dijit/form/RadioButton" disabled class="av-radio"> I'm disabled </label>
## Checkbox
<label class="checkbox"> <input name="checkbox1" type="checkbox" data-dojo-type="dijit/form/CheckBox" checked disabled class="av-checkbox"> Track plain-text clicks </label>
## Checkbox disabled
<label class="checkbox"> <input name="checkbox-disabled" type="checkbox" data-dojo-type="dijit/form/CheckBox" checked disabled class="av-checkbox"> I'm disabled </label>
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
x
<div class="field-wrapper">
<label class="radio"> <input type="radio" data-dojo-type="dijit/form/RadioButton" class="av-radio">Yes. My campaigns are public, and I want them to be discovered <div class="radio-description">My email campaigns are meant to be seen by the public. The more the merrier, in fact. If/when Mailchimp builds tools that help people discover me and sign up for this list, I'd like to take part in that.
</div> </label>
</div>
<div class="field-wrapper">
<label class="checkbox"> <input type="checkbox" data-dojo-type="dijit/form/CheckBox" class="av-checkbox">Yes. My campaigns are public, and I want them to be discovered <div class="checkbox-description">My email campaigns are meant to be seen by the public. The more the merrier, in fact. If/when Mailchimp builds tools that help people discover me and sign up for this list, I'd like to take part in that.
</div> </label>
</div>
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
x
<ul class="line">
<li class="unit size1of4 position--relative c-choiceCard">
<div class="c-choiceCard_innerContainer">
<input type="checkbox" class="c-choiceCard_input av-checkbox" name="featured" id="featured-a">
<label for="featured-a" class="c-choiceCard_label border-gray border-radius--lv1 padding--lv4 alignc"> <div class="font-weight--normal !margin-bottom--lv2">Addon One
</div> <div class="font-weight--bold">$3.00
</div> </label>
<div class="c-choiceCard_indicator position--absolute top--0 left--0 margin--lv2 freddicon tick">
</div>
</div>
</li>
</ul>
This style controls the hover/selected/focus states of a choice card which uses an <input>
of type checkbox
or radio
.
Switch
Un-checked
Checked
Disabled
Checked & disabled
x
<input type="checkbox" data-dojo-type="mojo/widgets/Switch" class="av-checkbox">
<input type="checkbox" data-dojo-type="mojo/widgets/Switch" checked class="av-checkbox">
<input type="checkbox" data-dojo-type="mojo/widgets/Switch" disabled class="av-checkbox">
<input type="checkbox" data-dojo-type="mojo/widgets/Switch" checked disabled class="av-checkbox">
<input type="checkbox" data-dojo-type="mojo/widgets/Switch" data-dojo-props="description: 'Descriptions copy.'" checked class="av-checkbox">
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;
.
Range
x
<div data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="skipContainer:true, showButtons: false, minimum: 0, maximum: 50, pageIncrement: 1, intermediateChanges: true">
</div>
We use the HorizontalSlider
dijit component to represent the range input.
Disclosure element
x
<label class="disclosure-closed" onclick="mojo.utils.disclosureElement('disclose-this', this, true); return false;">Disclose More Things</label>
<div id="disclose-this" style="display:none;">These things have been disclosed!
</div>
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.