Forms
Collect the information needed for a task with clear labels, validation, and recovery
Ask for the information needed to complete the current task. Put related fields together, use a visible label for each control, and state what submission will do. Start with one clear primary action.
A visible label and helper text explain the expected value before the person submits it.
Illustrative example · Reduced motion: choose a state to compare.Choose a control
| Input | Shared component | Guidance |
|---|---|---|
| A short text value | TextInput | Keep examples in helper text, not only in a placeholder. |
| Several lines of text | TextArea | Make the expected length clear. |
| A quantity | NumberInput | Show units and relevant limits. |
| One choice from a list | Select or Combobox | Add search when the list is hard to scan. |
| Several independent choices | CheckboxGroup | Make the group question visible. |
| One of a few visible choices | RadioGroup | Keep the alternatives easy to compare. |
Use Form for the shared field structure. Identify required fields consistently, and explain constraints before an error occurs. Select defaults only when they are a safe and useful choice for the task.
Validation
Validate a field when the person has had a reasonable chance to complete it, or on submission. Avoid showing an error while someone is still entering a valid value. Keep server-side validation authoritative and display returned field errors next to the relevant control.
Connect descriptions and errors programmatically to their fields. On failed submission, help the person reach the first problem. Preserve their other answers. See Error handling.
Submit and recover
Name the result in the action label: “Create entity,” “Send invitation,” or “Save changes.” Show a pending state, prevent accidental duplicate requests, and confirm success only when the application has accepted the change.
Keep optional advanced settings behind progressive disclosure when they are rarely needed. If leaving the page would discard edits, give the person a chance to keep them.
Check the form with keyboard navigation, autofill, long values, validation failures, and slow requests. Every path should retain the input until it is saved or the person chooses to discard it.
Last updated on 2026-10-31
Was this page helpful?