BlueStack.io - Component Library

Basic Radio Buttons

Preview Code

Copy

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

Preview Code

Copy

Tiny Small Default Large Big

<div class="flex items-center gap-6">
  <label class="radio tiny">
    <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 small">
    <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 large">
    <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 big">
    <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>

<div class="flex items-center gap-6">
                <label class="radio tiny">
                    <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 small">
                    <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 large">
                    <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 big">
                    <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>

Radio Button Colors

Preview Code

Copy

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>
                
                <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>

Soft Variant

Preview Code

Copy

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

Preview Code

Copy

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="space-y-4">
  <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="space-y-4">
                <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

Preview Code

Copy

Select your payment method Credit Card PayPal Bank Transfer

<fieldset class="radio-group">
  <legend class="text-sm 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>

<fieldset class="radio-group">
                <legend class="text-sm 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

Preview Code

Copy

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>

<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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

Select a required option Option 1 Option 2

Please select an option to continue

<div class="space-y-2">
  <fieldset class="radio-group">
    <legend class="text-sm 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="text-sm text-red-600 ml-7">Please select an option to continue</p>
</div>

<div class="space-y-2">
                <fieldset class="radio-group">
                    <legend class="text-sm 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="text-sm text-red-600 ml-7">Please select an option to continue</p>
            </div>

Compact Group

Preview Code

Copy

Select size Extra Small Small Medium Large

<fieldset class="radio-group-compact">
  <legend class="text-sm 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="text-sm 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

Preview Code

Copy

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

Preview Code

Copy

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="space-y-4">
    <div>
      <h5 class="text-sm 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="text-sm 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="space-y-4">
                    <div>
                        <h5 class="text-sm 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="text-sm 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>

radio Component

Radio Button System

Basic Radio Buttons

Radio Button Sizes

Radio Button Colors

Soft Variant

Radio with Description

Radio Group

Horizontal Group

Radio Cards

Flipped Layout

Error State

Compact Group

Stack Layout

Radio in Context

Account Settings

Email Frequency

Profile Visibility