Radio button
Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
Overview
Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button should be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
Live demo
Format
When to use
Forms
Can be used in forms on a full page, in modals, or on side panels.
Settings
Used to change from one setting to another in a menu, page, or component.
Selection in lists
Used to choose a singular item within data tables or lists.
Headings
If necessary, a heading can accompany a set of radio buttons to provide further clarity for the user. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized).
Labels
Always use a clear and concise label for radio buttons. Be explicit about the action that will follow if the radio button is selected. Labels appear to the right of radio buttons. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words.
Default selection
A set of radio buttons should default to having one option selected. Never display them without a default selection.
Feedback
Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.