A form element that allows users to select a single item from group of items.
An input of type "radio" is a form element that allows users to select a single item from a list of related options.
Usage
When to use
To allow users to select a single option from a group of two or more mutually exclusive options.
When not to use
When users should check and uncheck an option, consider Checkbox.
When users need to select more than one option from a list, consider Checkbox.
When checking or unchecking results in an immediate change, consider Toggle.
Layout
We recommend using vertical Radio groups, especially with short option lists.
Required and optional
Generally, we recommend pre-selecting one of the radio buttons by default. However, there could be cases where the default selection could affect the user’s choice (the power of suggestion), and leaving all radio buttons unselected may provide a better user experience. Use required and optional indicators in those instances.
For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.
For shorter, simpler forms (e.g., login/signup and feedback requests), indicate optional fields instead.
The page navigation is complete. You may now navigate the page content as you wish.
A form element that allows users to select a single item from group of items.
An input of type "radio" is a form element that allows users to select a single item from a list of related options.
Usage
When to use
To allow users to select a single option from a group of two or more mutually exclusive options.
When not to use
When users should check and uncheck an option, consider Checkbox.
When users need to select more than one option from a list, consider Checkbox.
When checking or unchecking results in an immediate change, consider Toggle.
Layout
We recommend using vertical Radio groups, especially with short option lists.
Required and optional
Generally, we recommend pre-selecting one of the radio buttons by default. However, there could be cases where the default selection could affect the user’s choice (the power of suggestion), and leaving all radio buttons unselected may provide a better user experience. Use required and optional indicators in those instances.
For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.
For shorter, simpler forms (e.g., login/signup and feedback requests), indicate optional fields instead.