Forms
When building forms:
- Provide a heading and/or
<legend>(even if visually-hidden) - Label all form fields (even if visually-hidden)
- Avoid asking users for unnecessary data:
- Do not visually demarcate
requiredfields (eg no asterisk) --- by default all fields arerequired; - Optional fields should be limited and marked by appending “(optional)” to the
<label>
- Do not visually demarcate
- Maintain a meaningful reading order across breakpoints between:
- Source/markup order
- Visual display order (the sequential logic of the graphical layout)
- Tab/keyboard focus order.
- As necessary, provide hints or special instructions as descriptive text
- Provide meaningful, programmatically-associated error messages.
When building larger forms --- eg a stepped configuration --- consider adding:
- A summary of the details required later in the process
- A navigation to move back or even jump steps
- The ability to save progress and return later.
button
Use buttons for actions such as “Save”, “Cancel”, or “Add”.
control input
Checkboxes and radio buttons for all occasions.
date time-input
A simple HTML5 date or time input.
dropdowns
Select inputs, aka dropdowns.
error messages
Error messages identify and describe the issue(s) associated with form fields.
fieldsets
Wrappers for related form elements.
file input
A simple file upload form input element.
fixed text-input
Text inputs with prepended or appended data points.
form
Container class for `<form>` and wrapper classes for grouping form elements.
label
Label name and identify form fields. The `<label>` element represents a human-readable label for a user form input.
range slider
A sliding dial that sets a numeric value on a horizontal bar.
segmented control
A sliding toggle control for a mutually exclusive set of options.
setting list
A clean way of listing user options with support for switch toggles and control inputs.
switch input
A binary input that allows the user to toggle between checked and not checked.
text input
Text inputs provide styles for many text-based `<input>` types.