Radios
One choice among a few mutually exclusive options, all in view.
On this page
Playground
Layout
State
Background
<fieldset class="feitio-fieldset"><legend class="feitio-label">How often?</legend><div class="feitio-choices"><label class="feitio-choice"><input type="radio" name="pg-r" value="Every day">Every day</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Every week" checked>Every week</label><label class="feitio-choice"><input type="radio" name="pg-r" value="Every month">Every month</label></div></fieldset>When to use
- To pick exactly one of two to six options.
When not to use
- Many options: Select.
- Several choices: Checkbox.
- Two or three neighboring options that change the view right away (day and night, a list or a grid): SegmentedControl.
Examples
How often?
One below the other, in a Fieldset with the question.
Show code
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Com que frequência?</legend>
<div class="feitio-choices">
<label class="feitio-choice"><input type="radio" name="frequencia" value="uma-vez">Uma vez</label>
…
</div>
</fieldset>States
Do and don’t
Do
One below the other, and none pre-selected when the choice matters.
Don’t
Options crammed in one line: hard to see which circle belongs to which text.
Accessibility
- Always inside a Fieldset with a title; the arrow keys move between options.
- Side by side only with two short options, like "Yes" and "No".
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-choices" | around | space-2 between options. |
class="feitio-choice" | on the <label> | Circle and text clickable together. |
name | the same on all | One choice per group. |
checked | — | Only when there is a sensible default. |