Forms
Basic Field
When to use
Allows the user to enter a value. It is mandatory by default, so there is no need to show any indication of a required field.
Optional field
When to use
An optional field. All fields are required by default, so if a field is optional, it is marked in this way.
Basic Field with comments
When to use
Use if the question being asked requires a specific format E.G. dd/mm/yyy or if we need to justify the question to the user E.G. "Providing a phone number means we will be able to respond quicker" or additional instructions E.G. "Must match password above"
Basic Field with all available options
When to use
Use with large input feilds where we need to specify several pieces of information that you would like provided.
Use for providing good and bad example answers for an input feild. This allows the user to make a request that is more likely to be actionable.
Basic textarea (with character counter)
When to use
Use if the question being asked requires a large amount of text to enter E.G. writing a complaint.
Basic Field with Checkbox
Basic Dropdown (inline)
When to use
Use when you want the user to select one option form a list that is too long to be appropriate for radio buttons.
Basic dropdown (block)
When to use
To be used for short text in a dropdown, such as a title (Mr, Mrs, etc).
Address picker
When to use
Use whenever a transaction requires the user to live in a Bristol or other geofenced address.
Various Checkboxes
When to use
Use when you want the user to select multiple options form a list.
Microcopy text can be used if one of your checkbox options needs further explanation or justification.
Use disabled style only if the page is in a state where interacting with the checkbox will cause the form to break.
Various Radios
When to use
Use very sparingly. In general, usability is improved by avoiding plain 'yes' and 'no' options and providing full statements. So the above example would be better as "I agree" or "I do not agree"—or perhaps, better still, remove the radios altogether and have a sentence like "By selecting 'next' you are agreeing to our terms and conditions".
Various Radios continued
When to use
Use when you want the user to make a single selection from a small list of options.
Microcopy text can be used if one of your radio options needs further explanation or justification
Use disabled style only if one of your radio options needs further explanation or justification.