Components
Components / molecules
A form field puts a label, a hint and an error around a control, so people know what to enter and what went wrong.
Usage
Wrap every text input and select in a Field. Say the format in the hint above the control rather than in placeholder text, mark each field as required or optional, and explain the asterisk once at the top of the form. Use RadioGroup for a set of radios.
02 / examples
Variant 01
Mark every field as required or optional, say the format in a hint above the control, and explain the asterisk once. An error replaces the hint's job with a message and an icon.
View content
* marked fields are required
As it appears on your passport
Include the country code
We will send the confirmation here
Enter an email address like name@example.com.
Variant 02
A fieldset with a legend gives the options a shared name and a place for the hint and the error.
View content
Variant 03
Label, hint and error around a control, and a grouped set of radios.
View content
Shown in the sidebar and in search results.
Choose an owner before saving.
03 / contract
A form field wraps a control with its label, a hint and an error message, and it connects them so that assistive technology reads them together. The hint sits above the control and describes what to enter and in which format, while an error replaces the guessing with a clear message and an icon. Each field is marked as required or optional.
A radio group wraps a set of radio buttons in a fieldset with a legend, and it takes the same hint, error and required or optional marking. The field uses the same identifier as the control inside it, so the label always points to a real control.
04 / accessibility
Every control has a visible, persistent label, because placeholder text disappears while typing and is not a replacement for a label. Hints and errors are connected to the control, and a control with an error is marked as invalid so that screen readers announce the problem.
An error is always shown as text with an icon, and it should explain what went wrong and how to fix it. A set of radio buttons belongs in a fieldset with a legend, so that the group has a name that is read before the options.