Component · input.radio
Radio
A single-select option within a mutually exclusive group.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
input | yes | The radio affordance. |
label | yes | Visible text naming the option. |
group-label | yes | Name of the mutually exclusive set. |
States
- default
- hover
- focus-visible
- selected
- unselected
- disabled
Keyboard
- Arrow keys move selection within the group
- Space selects the focused radio when appropriate for the platform pattern
Accessibility
Expose radio semantics inside a radiogroup with a group name. Only one option in the group is selected. Arrow-key navigation must not jump out of the group unexpectedly.
Motion
Selection indicator may fade or scale slightly; under reduced motion, switch selection without animation.
Platform mappings
web
web
Native input type=radio within a fieldset/legend or radiogroup pattern.
apple
apple
SwiftUI Picker with radio-group semantics or equivalent exclusive selection control.
android
android
Compose RadioButton inside a RadioGroup.