Radio Button

selection

Radio buttons let people select one option from a set of options. Only one radio can be selected in a group at a time.

Properties

Name Type Required Default Description
checked boolean - - Whether the radio button is selected
disabled boolean - - Whether the radio button is disabled
required boolean - - Whether selection is required. If any radio in a group is required, all are implicitly required
value string - on The value submitted with the form when checked
name string - - The HTML name for form submission and grouping radios

States

unchecked

Default unselected state

checked

Selected state

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: radio
Keyboard Support:
  • Tab - Move focus to/from the radio group
  • ArrowUp/ArrowDown - Move selection within vertical radio group
  • ArrowLeft/ArrowRight - Move selection within horizontal radio group
  • Space - Select the focused radio
Screen Reader Notes: Place radios inside role="radiogroup" with aria-label or aria-labelledby. Each radio needs aria-label. Do not wrap radios inside label elements.

LLM Context

Intent: Select one option from a mutually exclusive set
Anti-Patterns:
  • Radio without aria-label
  • Radio group without radiogroup role
  • Wrapping radio inside label element
  • Using radio for multiple selections
  • Too many radio options (use select instead)
Example Usage: 
<div role="radiogroup" aria-label="Size"><md-radio name="size" value="small" aria-label="Small"></md-radio><md-radio name="size" value="large" aria-label="Large"></md-radio></div>
<md-radio name="agree" value="yes" checked aria-label="Yes"></md-radio>
<md-radio id="opt-1" name="option" value="1"></md-radio><label for="opt-1">Option 1</label>