Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:


Pattern Section: Forms

Taking user input of any and all kind, and doing something with it. Note: some patterns that could properly be considered “form” elements may actually be in sections of their own, depending on how many variations they have and how often they stand on their own.

Form row

The near-fundamental unit of the form, this contains (usually) just an <input> and its <label>.

Toggle pattern display width

Form row with subsections

Used when you want to have two label/input pairs occupy one horizontal row in the form. Note the use of the width utility classes (u-w-50p, u-w-33p, and u-w-66p) and the padding utility classes (u-pl-pad-half and u-pr-pad-half) to properly space and pad the sections.

Toggle pattern display width

Form row with multiple checkboxes

Similar to the Form row with subsections pattern, this allows an array of checkboxes to be displayed in a grid, while providing space for their labels.

Toggle pattern display width

Actions form row

The last row of a form, this contains the “action” buttons—the ones that allow a user to either commit to or back out from whatever the form is about.

Toggle pattern display width

Label and input

A label and input pair. Inputs should always be paired with a descriptive label.

Toggle pattern display width

Label

A label describing the input to which its paired.

Toggle pattern display width

Text input

A basic text input.

Toggle pattern display width

Dropdown input

A basic dropdown input.

Toggle pattern display width

Checkbox input

A basic checkbox input.

Toggle pattern display width

Instant view modifier form with help

There’s no submit button on this, bringing realtime view modification. Similar to the “Input form with help”, but more immediate.

Toggle pattern display width

Input form with help

Useful for taking user input and modifying a view, as shown here with the search query functionality.

Toggle pattern display width

Pagination

A form and arrows for navigating between a long set of pages. Can be used outside of the .box.box--pagination>.box__content, but must be in a container with display: inline-block; to ensure it’s just as wide as it needs to be.

Toggle pattern display width