Forms
Form elements
All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users click on the text input.
Labels should be aligned above the text input they refer to. They should be:
- short and direct
- written in sentence case
- Don’t use colons
Text Input
Help text explaining what to input
Select Input
Textarea
Checkbox inputs
Allow a user to select one or more options.
Radio buttons
Allow a user to select only one option from a list of options. Ideal for short lists and usually preferable to select inputs as all the options are immediately visible.
Explanatory text
Buttons
Buttons share styling from links but the underlying control is distinct. A button is an action that triggers code usually submit.