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>.
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.
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 widthActions 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 widthLabel and input
A label and input pair. Inputs should always be paired with a descriptive label.
Toggle pattern display widthInstant 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 widthInput form with help
Useful for taking user input and modifying a view, as shown here with the search query functionality.
Toggle pattern display widthPagination
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.