radio component

Drop-in semantic component. See examples, sizes, variants, and source.

Single-choice picker built from a radio label that wraps a hidden radio-input, a radio-box with a radio-icon dot, and a radio-label. Group multiple radios with radio-group, radio-group-horizontal, or radio-stack; promote individual options to selectable cards with radio-card. Behavior is native — interactive enhancements live in radio.js.

Radio Button System

Basic Radio Buttons

Option 1 Option 2 (Selected) Option 3 Option 4 (Disabled)

<div class="space-y-3">
  <label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option1" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 1</span>
  </label>

  <label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option2" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 2 (Selected)</span>
  </label>

  <label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option3" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 3</span>
  </label>

  <label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option4" disabled />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 4 (Disabled)</span>
  </label>
</div>

<div class="space-y-3">
  <label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option1" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 1</span>
  </label>

<label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option2" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 2 (Selected)</span>
  </label>

<label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option3" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 3</span>
  </label>

<label class="radio">
    <input type="radio" name="basic-demo" class="radio-input" value="option4" disabled />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Option 4 (Disabled)</span>
  </label>
</div>

Radio Button Sizes

Tiny Small Default Large Big

<div class="flex items-center gap-6">
  <label class="radio xs">
    <input type="radio" name="size-demo" class="radio-input" value="tiny" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Tiny</span>
  </label>

  <label class="radio sm">
    <input type="radio" name="size-demo" class="radio-input" value="small" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Small</span>
  </label>

  <label class="radio">
    <input type="radio" name="size-demo" class="radio-input" value="default" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Default</span>
  </label>

  <label class="radio xl">
    <input type="radio" name="size-demo" class="radio-input" value="large" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Large</span>
  </label>

  <label class="radio lg">
    <input type="radio" name="size-demo" class="radio-input" value="big" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Big</span>
  </label>
</div>

<label class="radio sm">
    <input type="radio" name="size-demo" class="radio-input" value="small" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Small</span>
  </label>

<label class="radio">
    <input type="radio" name="size-demo" class="radio-input" value="default" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Default</span>
  </label>

<label class="radio xl">
    <input type="radio" name="size-demo" class="radio-input" value="large" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Large</span>
  </label>

Radio Button Colors

Primary Positive Warning Negative Info

<div class="flex flex-wrap gap-4">
  <label class="radio primary">
    <input type="radio" name="color-demo" class="radio-input" value="primary" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Primary</span>
  </label>

  <label class="radio positive">
    <input type="radio" name="color-demo" class="radio-input" value="positive" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Positive</span>
  </label>

  <label class="radio warning">
    <input type="radio" name="color-demo" class="radio-input" value="warning" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Warning</span>
  </label>

  <label class="radio negative">
    <input type="radio" name="color-demo" class="radio-input" value="negative" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Negative</span>
  </label>

  <label class="radio info">
    <input type="radio" name="color-demo" class="radio-input" value="info" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Info</span>
  </label>
</div>

<div class="flex flex-wrap gap-4">
  <label class="radio primary">
    <input type="radio" name="color-demo" class="radio-input" value="primary" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Primary</span>
  </label>

<label class="radio positive">
    <input type="radio" name="color-demo" class="radio-input" value="positive" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Positive</span>
  </label>

<label class="radio warning">
    <input type="radio" name="color-demo" class="radio-input" value="warning" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Warning</span>
  </label>

<label class="radio negative">
    <input type="radio" name="color-demo" class="radio-input" value="negative" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Negative</span>
  </label>

Soft Variant

Soft style radio Soft style selected

<div class="space-y-3">
  <label class="radio soft">
    <input type="radio" name="soft-demo" class="radio-input" value="soft1" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Soft style radio</span>
  </label>

  <label class="radio soft">
    <input type="radio" name="soft-demo" class="radio-input" value="soft2" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Soft style selected</span>
  </label>
</div>

Radio with Description

Email notifications

Get notified via email when something happens

SMS notifications

Receive text messages for important updates

Push notifications

Get notifications directly on your device

<div class="stack">
  <label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="email" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">Email notifications</span>
      <div class="radio-description">Get notified via email when something happens</div>
    </div>
  </label>

  <label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="sms" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">SMS notifications</span>
      <div class="radio-description">Receive text messages for important updates</div>
    </div>
  </label>

  <label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="push" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">Push notifications</span>
      <div class="radio-description">Get notifications directly on your device</div>
    </div>
  </label>
</div>

<div class="stack">
  <label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="email" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">Email notifications</span>
      <div class="radio-description">Get notified via email when something happens</div>
    </div>
  </label>

<label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="sms" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">SMS notifications</span>
      <div class="radio-description">Receive text messages for important updates</div>
    </div>
  </label>

<label class="radio">
    <input type="radio" name="desc-demo" class="radio-input" value="push" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div>
      <span class="radio-label">Push notifications</span>
      <div class="radio-description">Get notifications directly on your device</div>
    </div>
  </label>
</div>

Radio Group

Select your payment method Credit Card PayPal Bank Transfer

<fieldset class="radio-group">
  <legend class="subhead font-medium text-gray-900 mb-3">Select your payment method</legend>
  <label class="radio">
    <input type="radio" name="payment" class="radio-input" value="credit-card" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Credit Card</span>
  </label>

  <label class="radio">
    <input type="radio" name="payment" class="radio-input" value="paypal" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">PayPal</span>
  </label>

  <label class="radio">
    <input type="radio" name="payment" class="radio-input" value="bank-transfer" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Bank Transfer</span>
  </label>
</fieldset>

Horizontal Group

Monthly Yearly Lifetime

<fieldset class="radio-group-horizontal">
  <legend class="sr-only">Select plan duration</legend>
  <label class="radio">
    <input type="radio" name="duration" class="radio-input" value="monthly" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Monthly</span>
  </label>

  <label class="radio">
    <input type="radio" name="duration" class="radio-input" value="yearly" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Yearly</span>
  </label>

  <label class="radio">
    <input type="radio" name="duration" class="radio-input" value="lifetime" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Lifetime</span>
  </label>
</fieldset>

Radio Cards

Basic Plan

Great for personal use and small projects

$9/month

Professional Plan

Perfect for growing businesses and teams

$29/month

Enterprise Plan

Advanced features for large organizations

$99/month

<div class="space-y-3">
  <label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="basic" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Basic Plan</div>
      <div class="radio-card-description">Great for personal use and small projects</div>
    </div>
    <div class="radio-card-badge">$9/month</div>
  </label>

  <label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="professional" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Professional Plan</div>
      <div class="radio-card-description">Perfect for growing businesses and teams</div>
    </div>
    <div class="radio-card-badge">$29/month</div>
  </label>

  <label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="enterprise" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Enterprise Plan</div>
      <div class="radio-card-description">Advanced features for large organizations</div>
    </div>
    <div class="radio-card-badge">$99/month</div>
  </label>
</div>

<div class="space-y-3">
  <label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="basic" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Basic Plan</div>
      <div class="radio-card-description">Great for personal use and small projects</div>
    </div>
    <div class="radio-card-badge">$9/month</div>
  </label>

<label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="professional" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Professional Plan</div>
      <div class="radio-card-description">Perfect for growing businesses and teams</div>
    </div>
    <div class="radio-card-badge">$29/month</div>
  </label>

<label class="radio-card">
    <input type="radio" name="plan" class="radio-input" value="enterprise" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <div class="radio-card-content">
      <div class="radio-card-title">Enterprise Plan</div>
      <div class="radio-card-description">Advanced features for large organizations</div>
    </div>
    <div class="radio-card-badge">$99/month</div>
  </label>
</div>

Flipped Layout

Radio on the right Selected radio on the right

<div class="space-y-3">
  <label class="radio flip">
    <input type="radio" name="flip-demo" class="radio-input" value="flip1" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Radio on the right</span>
  </label>

  <label class="radio flip">
    <input type="radio" name="flip-demo" class="radio-input" value="flip2" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Selected radio on the right</span>
  </label>
</div>

Error State

Select a required option Option 1 Option 2

Please select an option to continue

<div class="stack compact">
  <fieldset class="radio-group">
    <legend class="subhead font-medium text-gray-900 mb-3">Select a required option</legend>
    <label class="radio error">
      <input type="radio" name="error-demo" class="radio-input" value="error1" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <span class="radio-label">Option 1</span>
    </label>

    <label class="radio error">
      <input type="radio" name="error-demo" class="radio-input" value="error2" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <span class="radio-label">Option 2</span>
    </label>
  </fieldset>
  <p class="subhead text-red-600 ml-7">Please select an option to continue</p>
</div>

Compact Group

Select size Extra Small Small Medium Large

<fieldset class="radio-group-compact">
  <legend class="subhead font-medium text-gray-900 mb-3">Select size</legend>
  <label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="xs" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Extra Small</span>
  </label>

  <label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="s" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Small</span>
  </label>

  <label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="m" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Medium</span>
  </label>

  <label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="l" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Large</span>
  </label>
</fieldset>

<fieldset class="radio-group-compact">
  <legend class="subhead font-medium text-gray-900 mb-3">Select size</legend>
  <label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="xs" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Extra Small</span>
  </label>

<label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="s" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Small</span>
  </label>

<label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="m" checked />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Medium</span>
  </label>

<label class="radio">
    <input type="radio" name="compact-demo" class="radio-input" value="l" />
    <span class="radio-box">
      <span class="radio-icon"></span>
    </span>
    <span class="radio-label">Large</span>
  </label>
</fieldset>

Stack Layout

Light Theme

Use the light color scheme

Dark Theme

Use the dark color scheme

Auto Theme

Follow system preference

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <fieldset class="radio-stack">
    <legend class="sr-only">Select theme</legend>
    <label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="light" checked />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Light Theme</span>
        <div class="radio-description">Use the light color scheme</div>
      </div>
    </label>

    <label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="dark" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Dark Theme</span>
        <div class="radio-description">Use the dark color scheme</div>
      </div>
    </label>

    <label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="auto" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Auto Theme</span>
        <div class="radio-description">Follow system preference</div>
      </div>
    </label>
  </fieldset>
</div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <fieldset class="radio-stack">
    <legend class="sr-only">Select theme</legend>
    <label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="light" checked />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Light Theme</span>
        <div class="radio-description">Use the light color scheme</div>
      </div>
    </label>

<label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="dark" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Dark Theme</span>
        <div class="radio-description">Use the dark color scheme</div>
      </div>
    </label>

<label class="radio">
      <input type="radio" name="stack-demo" class="radio-input" value="auto" />
      <span class="radio-box">
        <span class="radio-icon"></span>
      </span>
      <div>
        <span class="radio-label">Auto Theme</span>
        <div class="radio-description">Follow system preference</div>
      </div>
    </label>
  </fieldset>
</div>

Radio in Context

Account Settings

Email Frequency

Daily

Get updates every day

Weekly

Get updates once a week

Monthly

Get updates once a month

Profile Visibility

Public

Anyone can view your profile

Private

Only you can view your profile

<div class="bg-white p-6 rounded-lg border border-gray-200 space-y-6">
  <h4 class="font-medium text-gray-900">Account Settings</h4>

  <div class="stack">
    <div>
      <h5 class="subhead font-medium text-gray-900 mb-3">Email Frequency</h5>
      <fieldset class="radio-group">
        <legend class="sr-only">Email frequency</legend>
        <label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="daily" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Daily</span>
            <div class="radio-description">Get updates every day</div>
          </div>
        </label>

        <label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="weekly" checked />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Weekly</span>
            <div class="radio-description">Get updates once a week</div>
          </div>
        </label>

        <label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="monthly" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Monthly</span>
            <div class="radio-description">Get updates once a month</div>
          </div>
        </label>
      </fieldset>
    </div>

    <div>
      <h5 class="subhead font-medium text-gray-900 mb-3">Profile Visibility</h5>
      <fieldset class="radio-group">
        <legend class="sr-only">Profile visibility</legend>
        <label class="radio">
          <input type="radio" name="visibility" class="radio-input" value="public" checked />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Public</span>
            <div class="radio-description">Anyone can view your profile</div>
          </div>
        </label>

        <label class="radio">
          <input type="radio" name="visibility" class="radio-input" value="private" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Private</span>
            <div class="radio-description">Only you can view your profile</div>
          </div>
        </label>
      </fieldset>
    </div>
  </div>
</div>

<div class="bg-white p-6 rounded-lg border border-gray-200 space-y-6">
  <h4 class="font-medium text-gray-900">Account Settings</h4>

<div class="stack">
    <div>
      <h5 class="subhead font-medium text-gray-900 mb-3">Email Frequency</h5>
      <fieldset class="radio-group">
        <legend class="sr-only">Email frequency</legend>
        <label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="daily" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Daily</span>
            <div class="radio-description">Get updates every day</div>
          </div>
        </label>

<label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="weekly" checked />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Weekly</span>
            <div class="radio-description">Get updates once a week</div>
          </div>
        </label>

<label class="radio">
          <input type="radio" name="email-freq" class="radio-input" value="monthly" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Monthly</span>
            <div class="radio-description">Get updates once a month</div>
          </div>
        </label>
      </fieldset>
    </div>

<div>
      <h5 class="subhead font-medium text-gray-900 mb-3">Profile Visibility</h5>
      <fieldset class="radio-group">
        <legend class="sr-only">Profile visibility</legend>
        <label class="radio">
          <input type="radio" name="visibility" class="radio-input" value="public" checked />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Public</span>
            <div class="radio-description">Anyone can view your profile</div>
          </div>
        </label>

<label class="radio">
          <input type="radio" name="visibility" class="radio-input" value="private" />
          <span class="radio-box">
            <span class="radio-icon"></span>
          </span>
          <div>
            <span class="radio-label">Private</span>
            <div class="radio-description">Only you can view your profile</div>
          </div>
        </label>
      </fieldset>
    </div>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`radio`	Outer label that wraps the input + box + label	Use a `label` element
	`radio-input`	Visually hidden native input	Always required
	`radio-box`	Visible circle that reflects checked state	Required
	`radio-icon`	Inner dot that appears when checked	Place inside `.radio-box`
	`radio-label` / `radio-description`	Text label and optional secondary description	Description sits beneath the label
Sizes	`xs`	14px box — tiny	Modifier on `radio`
	`sm`	16px box — small	Modifier on `radio`
	(default)	20px box — medium	No size class needed
	`xl`	24px box — large	Modifier on `radio`
	`lg`	28px box — big	Modifier on `radio`
Semantic Colors	`primary`	Blue checked state	Modifier on `radio`
	`positive`	Green checked state	Modifier on `radio`
	`negative`	Red checked state	Modifier on `radio`
	`warning`	Orange checked state	Modifier on `radio`
	`info`	Blue checked state (alias for primary)	Modifier on `radio`
	`red` `orange` `yellow` `olive` `green` `teal` `blue` `violet` `purple` `pink` `brown` `grey` `black`	Extended palette checked colors	Decorative; prefer semantic names
Variants / States	`soft`	Tinted background instead of solid checked color	Modifier on `radio`
	`error`	Red border, label, and focus ring	Modifier on `radio`
	`flip`	Move the box to the right of the label	Modifier on `radio`
Radio Card	`radio-card`	Card-shaped radio with title, description, and badge	Use a `label` element
	`radio-card-content`	Wrapper for title + description	Inside `.radio-card`
	`radio-card-title` / `radio-card-description`	Card text rows	Inside `.radio-card-content`
	`radio-card-badge`	Right-aligned pill (price, tag)	Inside `.radio-card`
Groups	`radio-group`	Vertical stack of radios	Use a `fieldset`
	`radio-group-horizontal`	Wrapping flex row of radios	Use a `fieldset`
	`radio-group-compact`	Tighter vertical stack with reduced gap	Use a `fieldset`
	`radio-stack`	Card list — each radio becomes a separated row	Wrap with a bordered container