Radio group
/RAY-dee-oh GROOP/ · noun · INPUT pattern · #053
Round buttons where picking one releases the others — exactly one answer from a visible set. Named after mechanical car-radio presets.
You might call it
- “the round buttons where you pick one”
- “select one option circles”
- “the little circles in a form”
- “single-choice options”
- “radio buttons”
…its name is Radio group.
Common questions
Why are they called radio buttons?
After the preset station buttons on old car radios: pushing one in popped the previously pressed one back out, so only one could be active at a time — exactly how a radio group behaves.
What is a radio button?
A small circle in a form that lets you pick exactly one option from a group: choosing one clears the others. Use checkboxes instead when several options can be selected at once.
In code
| iOS (SwiftUI / UIKit) | No radio buttons on iPhone — use a Picker or a list with one checkmark; macOS has .pickerStyle(.radioGroup) |
|---|---|
| Jetpack Compose | RadioButton Modifier.selectableGroup() |
| Android (Views) | RadioGroup MaterialRadioButton |
| Flutter | Radio RadioListTile |
| Web (HTML) | <input type="radio" name="…"> <fieldset> |
Prompt for your AI coding tool
Use a radio group for this choice: two to six options stacked vertically, each a round button with its label, where clicking the label also selects it. Exactly one option is selected at a time and one is selected by default when there is a sensible default. Arrow keys move between options. On the web, give every input the same name and wrap them in a <fieldset> with a <legend> stating the question.
More UI words to use when vibe coding →