On this page
Overview
Show code, CreateProject.tsx
Variants
Show code, ErrorSummary.tsx
Grouped choices
Several checkboxes go in a group whose name says what they are for, as the choices of a RadioGroup do.
Show code, GroupedChoices.tsx
A long form in steps
A long form splits into a few short steps, each a page of its own with its fields.
- Progress, split into steps, says where people are.
- Continue checks the step's fields before moving on, and Back keeps every answer.
- The last step shows the answers before the form's own action.
Show code, LongFormInSteps.tsx
Anatomy
Error summary
Field and its label
Description
Error
Primary action
Show code, FormAnatomy.tsx
Behaviour
When to check
On submit first: show each field's error, and move focus to the error summary, or straight to the field when there is only one.
- Then as people leave a field they have typed in.
- Never while they type, though an error goes as soon as the value is right.
Show code, ValidationTiming.tsx
Sending
While the form is sent, its submit button shows that it is working: it keeps its size and ignores presses.
- When the server refuses or can't be reached, keep everything people entered.
- Move focus to an Alert at the top that says what to do.
Show code, ServerError.tsx
Rules
The aim is a form people get right on the first submit.
Use it when
- Several answers, given and submitted together
- Finding and fixing what a form refused
Which control?
Ask for a choice with the control that shows it best.
- Checkbox
A yes or no that waits for the submit, or several choices of a few.
- Switch
A setting that applies at once, outside a form people submit, as in settings.
- Radio group
One choice of a few, all in view, where people compare them.
- Segmented control
One choice of a few short options that changes a view at once, such as a layout.
- Select
One choice of many, or of a few where room is short.
- Combobox
One choice of a long list that people type to find, such as a time zone or a person.
Dates and times
A date, a time or a month each have a picker of their own, which people can also type into.
- Date picker
A day, such as a due date or a start date.
- Time picker
A time of day, such as when a meeting starts.
- Month picker
A month, such as a report's period or a card's expiry date.
Show code, OneColumn.tsx
Show code, SideBySide.tsx
After an error
Keep the submit button enabled, and say what is wrong after a submit.
- A disabled button can't tell people why.
- Keep what people entered after any error.
Labels
A label is a short noun phrase with no colon, such as "Project name".
- Mark the optional fields, "Description (optional)", never the required ones with a star.
- A format or a limit goes in the description, read before people type.
- A placeholder holds only an example value, such as name@example.com, never the label or instructions.
- The submit button says what it does, "Create project", never "Submit".
- Cancel, where a form has one, is a secondary Button before it, as a dialog's close button is.
Error messages
Start with the fix, in the field's own words, such as "Enter a due date after the start date" or "Enter an email address like name@example.com".
- Never "Error: invalid input" or "Project name is required!".
- Blame no one and show no code; a reference may follow for support.
- The summary is titled "There is a problem" and repeats each field's message word for word.
Accessibility
Focus and keyboard
Tab follows the fields in the order they show, and Enter in a text field submits.
- A refused submit moves focus to the summary, whose links each focus their field.
- Where focus goes straight to the field and is already there, as after Enter, say the error in a status too.