Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Form Elements

Dijit 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

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

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

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

Personal information

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.

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.

Color

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

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.

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

Range

We use the HorizontalSlider dijit component to represent the range input.

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.