Radio

Status

Component checklist

Key points

• Radio buttons allow users to select a single option from a group of related items
• Use radio buttons when users can only select one option from a list
• Use checkboxes if users need to select multiple options from a list
• Use this input type along with other form guidelines
• Radio buttons should always be vertically stacked
• Radio buttons can be unselected or have none pre-selected

Use radio buttons to allow users to select a single option from a group of mutually exclusive choices.

Boxed radio buttons

Avoid using boxed radio buttons; use radio groups instead, as this is an established pattern. Use boxed radio buttons only when substantial body text surrounds the form control and requires visual separation. It’s generally advised not to use this.

Progressive disclosure

You can ask the user a related question when they select a particular radio option, so they only see the question when it is relevant to them.

This might make two related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the "Contact me by phone" option.

Keep it simple. If the related question is complicated or has more than one part, show it on the next page in the process instead.