Form Fields
Components
Text Fields
Text Field with Visible Label
Text Fields must be labeled with a <label> tag to pass accessibility requirements. If you need to conserve space then use a .sr-only method. We recommend wrapping a label around the input group so interacting with all the elements of the group will focus the field.
Alternate layout
Text Field Usage
Text inputs are used when the user provides short text data. When possible, text inputs should be validated after a user has completed the field. Labels should be aligned to the leading edge of the text field container.
Error Text
An error field should be indicated by the error state. The error should also be described in the Error Message.
- If only one error is possible, error text describes how to avoid the error
- If multiple errors are possible, error text describes how to avoid the most likely error
For more on error text, see the section in Material.io's Text fields page.
Text Field with Label
This is the default Text Field. The error message should appear when necessary but the spacing in page elements should account for the error field as if it were visible.
Text Field
Search Text Field
Search fields allow the user to search site, page, or component data. Search fields should be placed near the data they search, and labelled so the user knows what data they are searching.
Disabled
Check Boxes
Checkbox with Label
Checkboxes are used when a user has the option to select multiple items from a list.
Selected
Unselected
To meet WCAG 2.1 AA non-text color contrast requirements the border color for checkboxes and radio buttons is #686868.
Indeterminate
Indeterminate checkboxes are typically used in tables and accordions when all items in a checkbox group are not checked, therefore the master checkbox can show neither checked or unchecked state. Go to https://css-tricks.com/indeterminate-checkboxes/ to learn more about indeterminate checkboxes.
Disabled
Radio Buttons
Radio buttons are used when a user has the option to select only a single item from a list.
Radio with Label
Radio, Enabled, Selected = True
Radio, Enabled, Selected = False
Radio, Disabled
Date Picker
Flatpickr example.
Calendar Day Buttons
Unselected
Selected
Unselected Today
Selected Today
Previous/Next
Mostly used when the day is on the calendar but falls out of the month in question.
Disabled
Truly disabled, no pointer events.
Stepper
Min width should be around 6rem
Stepper with Label
Disabled
Toggles
Toggles should be used to control binary options, i.e. true/false. Toggles should be used in the place of checkboxes when an action can be independently controlled and does not rely on the selections in the rest of the list.