Radio button
Use radio buttons where users must make a single selection.
Section titled “ Design”Variants
Section titled “Variants”
Section titled “ In Practice”Radio buttons should:
- Always be used with an associated label component.
- Be part of a list of radio buttons that:
- Include at least two or more choices.
- Are used to have users select only one option.
- Include mutually exclusive options — this means that each option must be independent from every other option in the list. For example: Red, blue, and yellow are mutually exclusive. Red, blue, yellow, red/blue are not mutually exclusive.
- List options in a rational order that makes logical sense.
- Have a default option selected whenever possible.
Section titled “ Content guidelines”Labels
Section titled “Labels”- Keep radio labels short and descriptive.
- Start all radio buttons labels with a capital letter.
- Don’t include punctuation after radio button labels.
Section titled “ Accessibility”Keyboard support
Section titled “Keyboard support”- Move focus to each radio using the tab key (or shift + tab when tabbing backwards)
- To interact with the radio when it has keyboard focus, press the space key