Switch
Material Design 3 switch component for toggling between on and off states
Switch
Switches toggle the state of a single item on or off. @duskmoon-dev/core provides a Material Design 3 switch component with smooth animations and multiple variants.
Basic Usage
Simply add the .switch class to an <input type="checkbox">:
Basic Switch
html
<input type="checkbox" class="switch" />With Label
Wrap the switch in a label for better UX:
Switch with Label
html
<label class="switch-label">
<input type="checkbox" class="switch" />
<span>Enable notifications</span>
</label>Checked State
Checked Switch
html
<label class="switch-label">
<input type="checkbox" class="switch" checked />
<span>Enabled by default</span>
</label>Sizes
Five sizes are available:
Switch Sizes
html
<div class="flex items-center gap-4">
<label class="switch-label">
<input type="checkbox" class="switch switch-xs" checked />
<span>Extra Small</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch switch-sm" checked />
<span>Small</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch switch-md" checked />
<span>Medium</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch switch-lg" checked />
<span>Large</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch switch-xl" checked />
<span>Extra Large</span>
</label>
</div>Color Variants
Primary (Default)
Primary Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-primary" checked />
<span>Primary</span>
</label>Secondary
Secondary Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-secondary" checked />
<span>Secondary</span>
</label>Tertiary
Tertiary Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-tertiary" checked />
<span>Tertiary</span>
</label>Success
Success Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-success" checked />
<span>Success</span>
</label>Warning
Warning Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-warning" checked />
<span>Warning</span>
</label>Error
Error Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-error" checked />
<span>Error</span>
</label>Info
Info Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-info" checked />
<span>Info</span>
</label>All Colors Comparison
All Color Variants
html
<div class="flex flex-wrap gap-4">
<input type="checkbox" class="switch switch-primary" checked />
<input type="checkbox" class="switch switch-secondary" checked />
<input type="checkbox" class="switch switch-tertiary" checked />
<input type="checkbox" class="switch switch-success" checked />
<input type="checkbox" class="switch switch-warning" checked />
<input type="checkbox" class="switch switch-error" checked />
<input type="checkbox" class="switch switch-info" checked />
</div>States
Disabled
Disabled Switches
html
<div class="flex gap-4">
<label class="switch-label">
<input type="checkbox" class="switch" disabled />
<span>Disabled unchecked</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" checked disabled />
<span>Disabled checked</span>
</label>
</div>Switch Groups
Vertical Group
Vertical Switch Group
html
<div class="switch-group">
<label class="switch-label">
<input type="checkbox" class="switch" name="notifications" checked />
<span>Email notifications</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" name="sms" />
<span>SMS notifications</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" name="push" checked />
<span>Push notifications</span>
</label>
</div>Horizontal Group
Horizontal Switch Group
html
<div class="switch-group switch-group-horizontal">
<label class="switch-label">
<input type="checkbox" class="switch" checked />
<span>Wi-Fi</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" />
<span>Bluetooth</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" checked />
<span>GPS</span>
</label>
</div>Form Integration
Switch in Form
html
<form class="space-y-4 max-w-md">
<fieldset>
<legend class="text-lg font-semibold mb-4">Privacy Settings</legend>
<div class="switch-group">
<label class="switch-label">
<input type="checkbox" class="switch" name="cookies" checked />
<span>Essential cookies</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" name="analytics" />
<span>Analytics cookies</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" name="marketing" />
<span>Marketing cookies</span>
</label>
</div>
</fieldset>
</form>Best Practices
When to Use
Switches are best for:
- Instant changes: Settings that take effect immediately
- On/off states: Binary choices like enable/disable features
- System settings: Preferences and configurations
When Not to Use
Avoid switches for:
- Form submission: Use checkboxes instead when changes require user confirmation
- Multiple options: Use radio buttons or select dropdowns
- Actions with delay: If the change requires processing time, consider a button
Accessibility
- Use semantic
<label>elements to associate labels with switches - Provide descriptive label text that explains what the switch controls
- Support keyboard navigation (built-in with native inputs)
- Ensure sufficient color contrast in both states
Touch Targets
The switch provides adequate touch targets. For mobile-first designs, use larger sizes:
Mobile-Friendly Switch
html
<label class="switch-label">
<input type="checkbox" class="switch switch-lg" />
<span>Mobile-friendly option</span>
</label>API Reference
Class Names
| Class | Description |
|---|---|
.switch | Base switch styling (required, on input element) |
.switch-xs | Extra small size (2rem width) |
.switch-sm | Small size (2.5rem width) |
.switch-md | Medium size (3.25rem width, default) |
.switch-lg | Large size (4rem width) |
.switch-xl | Extra large size (4.75rem width) |
.switch-primary | Primary color variant (default) |
.switch-secondary | Secondary color variant |
.switch-tertiary | Tertiary color variant |
.switch-success | Success color variant |
.switch-warning | Warning color variant |
.switch-error | Error color variant |
.switch-info | Info color variant |
.switch-label | Label wrapper for switch + text |
.switch-group | Container for vertical switch group |
.switch-group-horizontal | Horizontal layout modifier |
HTML Structure
Simple switch:
<input type="checkbox" class="switch" />With label:
<label class="switch-label">
<input type="checkbox" class="switch" />
<span>Label text</span>
</label>Switch group:
<div class="switch-group">
<label class="switch-label">
<input type="checkbox" class="switch" name="option1" />
<span>Option 1</span>
</label>
<label class="switch-label">
<input type="checkbox" class="switch" name="option2" />
<span>Option 2</span>
</label>
</div>States
| State | How to Apply |
|---|---|
| Checked | checked attribute |
| Disabled | disabled attribute |
| Focus | Automatic via :focus-visible |