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.

Default

Disabled

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.

Default

Second default radio Explanatory text

Disabled

Buttons

Buttons share styling from links but the underlying control is distinct. A button is an action that triggers code usually submit.