Radio Group

Plan

Free Pro Team

Show code

Usage

<div class="radio-group">
  <label class="label">
    <input class="radio" type="radio" name="plan" value="free" checked />
    Free
  </label>
  <label class="label">
    <input class="radio" type="radio" name="plan" value="pro" />
    Pro
  </label>
</div>

The name attribute is the group

Radios that share a name are one group: the browser keeps exactly one checked, and the arrow keys move between them. .radio-group only handles spacing — it is not what binds them.

States

Checked Unchecked Disabled Invalid

Show code

State	How
Checked	the native checked attribute
Disabled	the native disabled attribute
Invalid	aria-invalid="true"

Fieldset

A radio group needs a name of its own, and <legend> is how you give it one. Without it a screen reader announces the options but never the question.

Plan

Free Pro Team

Show code

Keyboard

Key	Action
↑ ↓ ← →	Move to the next or previous option, and select it
Tab	Leave the group — the whole group is one tab stop

All of it comes from the platform, because these are real radio inputs.

RTL

Set dir="rtl" on the page or on any subtree — the control moves to the other side of its label on its own. See the button page for a live example.

Accessibility

• One name per group. Two groups sharing a name become one group, and only one option across both stays checked.
• Wrap the group in a <fieldset> with a <legend>, rather than a heading.
• Do not pre-check an option you do not mean, because the group is then always answered. If the question is genuinely optional, leave every option unchecked and say so.
• Arrow keys select as they move. That is the standard behaviour and it is why a radio group should not trigger anything expensive on change.