Radio Group

A set of checkable buttons where only one option can be selected at a time.

Plan

Free

Pro

<fieldset class="fieldset">
  <legend>Plan</legend>
  <div role="radiogroup" aria-label="Plan" data-slot="radio-group">
    <div role="group" class="field flex-row items-center gap-3">
      <input type="radio" id="plan-free" name="plan" value="free" class="input" checked>
      <label for="plan-free">Free</label>
    </div>
    <div role="group" class="field flex-row items-center gap-3">
      <input type="radio" id="plan-pro" name="plan" value="pro" class="input">
      <label for="plan-pro">Pro</label>
    </div>
  </div>
</fieldset>

Usage

Add the input class to your <input type="radio"> elements. Use a shared name attribute for mutually exclusive options, and wrap related options in a semantic <fieldset> or an element with role="radiogroup".

<input type="radio" name="plan" class="input">

Checked state

Use native HTML state. Add checked for the initially selected option, or read and update the element's checked property in JavaScript.

<input type="radio" name="plan" class="input" checked>

Invalid state

Set aria-invalid="true" on the invalid radio and, when using field, set data-invalid="true" on the field wrapper.

I agree to the terms

You must select an option to continue.

<div role="group" class="field flex-row items-start gap-3" data-invalid="true">
  <input type="radio" id="radio-invalid" name="radio-invalid" class="input" aria-invalid="true">
  <div class="grid gap-1.5">
    <label for="radio-invalid">I agree to the terms</label>
    <p class="field-error">You must select an option to continue.</p>
  </div>
</div>

Examples

Basic

Default

Comfortable

Compact

<div role="radiogroup" aria-label="View density" data-slot="radio-group">
  <div role="group" class="field flex-row items-center gap-3">
    <input type="radio" id="density-default" name="density" value="default" class="input">
    <label for="density-default">Default</label>
  </div>
  <div role="group" class="field flex-row items-center gap-3">
    <input type="radio" id="density-comfortable" name="density" value="comfortable" class="input" checked>
    <label for="density-comfortable">Comfortable</label>
  </div>
  <div role="group" class="field flex-row items-center gap-3">
    <input type="radio" id="density-compact" name="density" value="compact" class="input">
    <label for="density-compact">Compact</label>
  </div>
</div>

Description

All new messages

Receive a notification for every new message.

Direct messages and mentions

Only notify me for direct messages and mentions.

<div role="radiogroup" aria-label="Notifications" data-slot="radio-group">
  <div role="group" class="field flex-row items-start gap-3">
    <input type="radio" id="notify-all" name="notifications" value="all" class="input" checked aria-describedby="notify-all-description">
    <div class="grid gap-1.5">
      <label for="notify-all">All new messages</label>
      <p id="notify-all-description" class="field-description">Receive a notification for every new message.</p>
    </div>
  </div>
  <div role="group" class="field flex-row items-start gap-3">
    <input type="radio" id="notify-mentions" name="notifications" value="mentions" class="input" aria-describedby="notify-mentions-description">
    <div class="grid gap-1.5">
      <label for="notify-mentions">Direct messages and mentions</label>
      <p id="notify-mentions-description" class="field-description">Only notify me for direct messages and mentions.</p>
    </div>
  </div>
</div>

Choice Card

Wrap a .field in a native <label> when the whole card should select the option.

Starter For small teams getting started.

Team Collaboration tools for growing teams.

<div role="radiogroup" aria-label="Plans" data-slot="radio-group" class="w-full max-w-md">
  <label>
    <div role="group" class="field flex-row items-center justify-between">
      <div class="grid gap-1.5">
        <span>Starter</span>
        <span class="field-description">For small teams getting started.</span>
      </div>
      <input type="radio" name="choice-plan" value="starter" class="input" checked>
    </div>
  </label>
  <label>
    <div role="group" class="field flex-row items-center justify-between">
      <div class="grid gap-1.5">
        <span>Team</span>
        <span class="field-description">Collaboration tools for growing teams.</span>
      </div>
      <input type="radio" name="choice-plan" value="team" class="input">
    </div>
  </label>
</div>

Fieldset

Notify me about...

All new messages

Direct messages and mentions

Nothing

<fieldset class="fieldset">
  <legend>Notify me about...</legend>
  <div role="radiogroup" aria-label="Notification preference" data-slot="radio-group">
    <div role="group" class="field flex-row items-center gap-3">
      <input class="input" type="radio" id="notify-all-fieldset" name="notify-fieldset" value="all" checked>
      <label for="notify-all-fieldset">All new messages</label>
    </div>
    <div role="group" class="field flex-row items-center gap-3">
      <input class="input" type="radio" id="notify-mentions-fieldset" name="notify-fieldset" value="mentions">
      <label for="notify-mentions-fieldset">Direct messages and mentions</label>
    </div>
    <div role="group" class="field flex-row items-center gap-3">
      <input class="input" type="radio" id="notify-none-fieldset" name="notify-fieldset" value="none">
      <label for="notify-none-fieldset">Nothing</label>
    </div>
  </div>
</fieldset>

Disabled

Disabled option

Disabled checked option

<div role="radiogroup" aria-label="Disabled notifications" data-slot="radio-group">
  <div role="group" class="field flex-row items-center gap-3" data-disabled="true">
    <input type="radio" id="radio-disabled" name="radio-disabled" class="input" disabled>
    <label for="radio-disabled">Disabled option</label>
  </div>
  <div role="group" class="field flex-row items-center gap-3" data-disabled="true">
    <input type="radio" id="radio-disabled-checked" name="radio-disabled" class="input" checked disabled>
    <label for="radio-disabled-checked">Disabled checked option</label>
  </div>
</div>

Invalid

Plan

Free

Pro

Select a plan to continue.

<fieldset class="fieldset" data-invalid="true">
  <legend>Plan</legend>
  <div role="radiogroup" aria-label="Invalid plan" data-slot="radio-group" aria-describedby="radio-group-error">
    <div role="group" class="field flex-row items-center gap-3" data-invalid="true">
      <input type="radio" id="radio-invalid-free" name="radio-invalid-plan" class="input" aria-invalid="true">
      <label for="radio-invalid-free">Free</label>
    </div>
    <div role="group" class="field flex-row items-center gap-3" data-invalid="true">
      <input type="radio" id="radio-invalid-pro" name="radio-invalid-plan" class="input" aria-invalid="true">
      <label for="radio-invalid-pro">Pro</label>
    </div>
  </div>
  <p id="radio-group-error" class="field-error">Select a plan to continue.</p>
</fieldset>

RTL

Radio group layout uses document direction and logical spacing. Set dir="rtl" on a parent to render right-to-left.

افتراضي

مريح

<div dir="rtl" role="radiogroup" aria-label="طريقة العرض" data-slot="radio-group">
  <div role="group" class="field flex-row items-center gap-3">
    <input type="radio" id="radio-rtl-default" name="radio-rtl" value="default" class="input" checked>
    <label for="radio-rtl-default">افتراضي</label>
  </div>
  <div role="group" class="field flex-row items-center gap-3">
    <input type="radio" id="radio-rtl-comfortable" name="radio-rtl" value="comfortable" class="input">
    <label for="radio-rtl-comfortable">مريح</label>
  </div>
</div>