Radio

Use radio when users should choose exactly one option from a small set.

Import

use PUI
# or
import PUI.Input

Basic Usage

Give each option the same name and a different value.

<label class="flex items-center gap-3">
  <.radio id="plan-free" name="plan" value="free" />
  <span>Free</span>
</label>

<label class="flex items-center gap-3">
  <.radio id="plan-pro" name="plan" value="pro" />
  <span>Pro</span>
</label>

<div class="space-y-3">
  <label class="flex items-center gap-3">
    <.radio id="demo-plan-starter" name="demo-plan" value="starter" checked />
    <span class="text-sm text-foreground">Starter</span>
  </label>
  <label class="flex items-center gap-3">
    <.radio id="demo-plan-pro" name="demo-plan" value="pro" />
    <span class="text-sm text-foreground">Pro</span>
  </label>
  <label class="flex items-center gap-3">
    <.radio id="demo-plan-enterprise" name="demo-plan" value="enterprise" />
    <span class="text-sm text-foreground">Enterprise</span>
  </label>
</div>

Default Selection

Use checked on the option that should start selected.

<label class="flex items-center gap-3">
  <.radio id="interval-monthly" name="interval" value="monthly" checked />
  <span>Monthly billing</span>
</label>

Grouping Radios

Wrap related options in a fieldset when the set needs a shared label or description.

<fieldset class="space-y-3">
  <legend class="text-sm font-medium text-foreground">Choose a plan</legend>

  <label class="flex items-center gap-3">
    <.radio id="starter" name="plan" value="starter" checked />
    <span>Starter</span>
  </label>

  <label class="flex items-center gap-3">
    <.radio id="enterprise" name="plan" value="enterprise" />
    <span>Enterprise</span>
  </label>
</fieldset>

Errors

Radio inputs do not render validation errors inline because error placement for radio groups varies depending on layout. Instead, surface group-level errors outside the individual radio controls — for example below a fieldset or as a separate paragraph beneath the options.

<fieldset class="space-y-3">
  <legend class="text-sm font-medium text-foreground">Choose a plan</legend>

  <label class="flex items-center gap-3">
    <.radio id="starter" name="plan" value="starter" checked />
    <span>Starter</span>
  </label>

  <p class="text-destructive text-sm mt-1">Please choose a plan.</p>
</fieldset>

<div class="space-y-3 max-w-sm">
  <div class="space-y-2">
    <label class="flex items-center gap-3">
      <.radio id="demo-plan-error" name="demo-plan-error" value="starter" />
      <span class="text-sm text-foreground">Starter</span>
    </label>
  </div>
  <div>
    <label class="flex items-center gap-3">
      <.radio id="demo-plan-error-pro" name="demo-plan-error" value="pro" />
      <span class="text-sm text-foreground">Pro</span>
    </label>
  </div>
  <p class="text-destructive text-sm mt-1">Choose a plan to continue.</p>
</div>

API Reference

Attributes