radio Component
Radio Button System
Basic Radio Buttons
Preview
Code
Copy
<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
<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
<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
<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
<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
<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
<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
<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
<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
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
Preview
Code
Copy
<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
<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
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>