radio Component
Radio Button System
Basic Radio Buttons
<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
<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
<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
<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
<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
<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
<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
<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
<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
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>Compact Group
<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
<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
Profile Visibility
<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>