Overview

(Box styled radio inputs) Radio Buttons are used to quickly switch between two/three/four possible states. Typically to confirm a a true/false or positive/negative statement.

In context: https://www.ft.com/register

Usage

When to use

Use radio buttons when the user needs to see all available options before confirming their choice, for example in forms.

When not to use

If there are more than four available options. If more text/information needs to be included in the button label use large radio button component. If the user has the option to select more than one option.

Negative highlight

Some box styled radio inputs will be preselected with negative selection or will be shown when a user confirms a negative selection, for example selecting 'no' when asked to subscribe to specific emails.

Large radio buttons

Radio buttons allow the user to select only one item in a set with additional space to give the user extra information about the available selections/options

Design

Anatomy

Radio buttons comprise of: