Radio
Material Design 3 radio button component with multiple variants, colors, and sizes
Radio
Radio buttons allow users to select a single option from a set of mutually exclusive choices. @duskmoon-dev/core provides a complete set of Material Design 3 radio button variants.
Basic Usage
Simply add the .radio class to an <input type="radio">:
Basic Radio
html
<input type="radio" name="demo" class="radio" />With Label
Wrap the radio in a label for better UX:
Radio with Label
html
<label class="radio-label">
<input type="radio" name="option" class="radio" />
<span>Option 1</span>
</label>Checked State
Checked Radio
html
<label class="radio-label">
<input type="radio" name="checked-demo" class="radio" checked />
<span>Selected option</span>
</label>Sizes
Five sizes are available:
Radio Sizes
html
<div class="flex items-center gap-4">
<label class="radio-label">
<input type="radio" name="size" class="radio radio-xs" checked />
<span>Extra Small</span>
</label>
<label class="radio-label">
<input type="radio" name="size" class="radio radio-sm" />
<span>Small</span>
</label>
<label class="radio-label">
<input type="radio" name="size" class="radio radio-md" />
<span>Medium</span>
</label>
<label class="radio-label">
<input type="radio" name="size" class="radio radio-lg" />
<span>Large</span>
</label>
<label class="radio-label">
<input type="radio" name="size" class="radio radio-xl" />
<span>Extra Large</span>
</label>
</div>Color Variants
Primary (Default)
Primary Radio
html
<label class="radio-label">
<input type="radio" name="color-primary" class="radio radio-primary" checked />
<span>Primary</span>
</label>Secondary
Secondary Radio
html
<label class="radio-label">
<input type="radio" name="color-secondary" class="radio radio-secondary" checked />
<span>Secondary</span>
</label>Tertiary
Tertiary Radio
html
<label class="radio-label">
<input type="radio" name="color-tertiary" class="radio radio-tertiary" checked />
<span>Tertiary</span>
</label>Success
Success Radio
html
<label class="radio-label">
<input type="radio" name="color-success" class="radio radio-success" checked />
<span>Success</span>
</label>Warning
Warning Radio
html
<label class="radio-label">
<input type="radio" name="color-warning" class="radio radio-warning" checked />
<span>Warning</span>
</label>Error
Error Radio
html
<label class="radio-label">
<input type="radio" name="color-error" class="radio radio-error" checked />
<span>Error</span>
</label>Info
Info Radio
html
<label class="radio-label">
<input type="radio" name="color-info" class="radio radio-info" checked />
<span>Info</span>
</label>All Colors Comparison
All Color Variants
html
<div class="flex flex-wrap gap-4">
<input type="radio" name="all-colors" class="radio radio-primary" checked />
<input type="radio" name="all-colors-2" class="radio radio-secondary" checked />
<input type="radio" name="all-colors-3" class="radio radio-tertiary" checked />
<input type="radio" name="all-colors-4" class="radio radio-success" checked />
<input type="radio" name="all-colors-5" class="radio radio-warning" checked />
<input type="radio" name="all-colors-6" class="radio radio-error" checked />
<input type="radio" name="all-colors-7" class="radio radio-info" checked />
</div>States
Disabled
Disabled Radio
html
<div class="flex gap-4">
<label class="radio-label">
<input type="radio" name="disabled" class="radio" disabled />
<span>Disabled unchecked</span>
</label>
<label class="radio-label">
<input type="radio" name="disabled-checked" class="radio" checked disabled />
<span>Disabled checked</span>
</label>
</div>Radio Groups
Vertical Group (Default)
Vertical Radio Group
Select a plan
html
<div class="radio-group">
<span class="radio-group-label">Select a plan</span>
<label class="radio-label">
<input type="radio" name="plan" class="radio" value="free" checked />
<span>Free Plan</span>
</label>
<label class="radio-label">
<input type="radio" name="plan" class="radio" value="pro" />
<span>Pro Plan</span>
</label>
<label class="radio-label">
<input type="radio" name="plan" class="radio" value="enterprise" />
<span>Enterprise Plan</span>
</label>
</div>Horizontal Group
Horizontal Radio Group
html
<div class="radio-group radio-group-horizontal">
<label class="radio-label">
<input type="radio" name="horizontal" class="radio" value="yes" checked />
<span>Yes</span>
</label>
<label class="radio-label">
<input type="radio" name="horizontal" class="radio" value="no" />
<span>No</span>
</label>
<label class="radio-label">
<input type="radio" name="horizontal" class="radio" value="maybe" />
<span>Maybe</span>
</label>
</div>Form Integration
Radio in Form
html
<form class="space-y-4 max-w-md">
<div class="radio-group">
<span class="radio-group-label">Shipping Method</span>
<label class="radio-label">
<input type="radio" name="shipping" class="radio" value="standard" checked />
<span>Standard Shipping (5-7 days)</span>
</label>
<label class="radio-label">
<input type="radio" name="shipping" class="radio" value="express" />
<span>Express Shipping (2-3 days)</span>
</label>
<label class="radio-label">
<input type="radio" name="shipping" class="radio" value="overnight" />
<span>Overnight Shipping</span>
</label>
</div>
</form>Best Practices
Usage Guidelines
- Use for mutually exclusive choices: Radio buttons are ideal when users can select only one option
- Provide clear labels: Each option should have a descriptive label
- Default selection: Consider providing a sensible default selection
- Limit options: Keep the number of options manageable (typically 2-7 items)
Accessibility
- Use semantic
<label>elements to associate labels with radio buttons - Ensure all radio buttons in a group share the same
nameattribute - Support keyboard navigation (built-in with native inputs)
- Provide meaningful labels
Touch Targets
The radio provides adequate touch targets. For mobile-first designs, use larger sizes:
Mobile-Friendly Radio
html
<label class="radio-label">
<input type="radio" name="mobile" class="radio radio-lg" />
<span>Mobile-friendly option</span>
</label>API Reference
Class Names
| Class | Description |
|---|---|
.radio | Base radio styling (required, on input element) |
.radio-xs | Extra small size (14px) |
.radio-sm | Small size (16px) |
.radio-md | Medium size (20px, default) |
.radio-lg | Large size (24px) |
.radio-xl | Extra large size (28px) |
.radio-primary | Primary color variant (default) |
.radio-secondary | Secondary color variant |
.radio-tertiary | Tertiary color variant |
.radio-success | Success color variant |
.radio-warning | Warning color variant |
.radio-error | Error color variant |
.radio-info | Info color variant |
.radio-label | Label wrapper for radio + text |
.radio-group | Container for vertical radio group |
.radio-group-horizontal | Horizontal layout modifier |
.radio-group-label | Group label text |
HTML Structure
Simple radio:
<input type="radio" name="group" class="radio" />With label:
<label class="radio-label">
<input type="radio" name="group" class="radio" />
<span>Label text</span>
</label>Radio group:
<div class="radio-group">
<span class="radio-group-label">Group Label</span>
<label class="radio-label">
<input type="radio" name="group" class="radio" value="a" />
<span>Option A</span>
</label>
<label class="radio-label">
<input type="radio" name="group" class="radio" value="b" />
<span>Option B</span>
</label>
</div>States
| State | How to Apply |
|---|---|
| Checked | checked attribute |
| Disabled | disabled attribute |
| Focus | Automatic via :focus-visible |