Forms
The rules for the whole form, before any field: ask little, one column, the label in view and the error below the field.
On this page
Rules for the whole form
- Ask only what is needed. Every extra field is work for the person. If you can find it out yourself, do not ask.
- One column. Fields one below the other, in the order the person thinks. Side by side only when they are one thing (hour and minute).
- Label always visible, above the field. Placeholder text never takes its place.
- Everything is required, except what says "(optional)". Marking the optional is shorter than scattering asterisks.
- The closer, the more together. Inside a field,
space-1; between options in a group,space-2; between one field and the next,space-5. - The error goes below the field, with icon and word, and a summary at the top when there is more than one. Below, it does not break a two-column form.
- The server always validates. The error comes back with the filled-in values; nothing the person wrote is lost.
- One main button at the end, saying what happens: "Save reminder". Feedback shows on the form itself.
A whole form
Time format:
Try saving with an empty name: the error shows below the field, and focus goes to it. With a name, feedback shows on the form itself.
Placeholder text
- Allowed as a short extra example, under a label that stays: "e.g. Water the plants", "Search tasks".
- Never instead of the label or the hint: it disappears when the person types, and what it said goes with it.
- Never with needed information (required format, limits): that goes in the hint, which stays.
- In the soft text color, which passes the 4.5 contrast.
Do and don’t
Do
Subject
The label stays visible, and the example only helps.
Don’t
The example instead of the label, with a rule inside: it all disappears when the person types.
Do
Note (optional)
Only the optional field is marked, in words.
Don’t
Name *
Asterisks on everything, with the key way down below.
Do
Name
The error below the field, with icon and word.
Don’t
Name
The error on top, vague, and by color only.
Writing
- Label: a short noun or a direct question ("Reminder name", "When to remind?"). No colon at the end.
- Hint: only if it helps get it right the first time. If every field has a hint, none gets read.
- Error: what to do, not what is wrong ("Write a name", not "Invalid field").
Components
- Field, TextInput, TimeInput, Select, Checkbox, Radios, Switch: the pieces.
- ErrorMessage and ErrorSummary: the errors.
- Feedback in place: what happens after Save.