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.
The near-fundamental unit of the form, this contains (usually) just an
<input> and its
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-66p) and the padding utility classes (
u-pr-pad-half) to properly space and pad the sections.
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
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
A label and input pair. Inputs should always be paired with a descriptive label.Toggle pattern display width
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
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.