Toggle
Accessible on/off switches with labels, sizes, intent-based styling, and micro-interactions.
01 Examples
Notification Preferences
Notification Preferences
Manage how you receive updates
02 Micro-Interactions (Mint)
Mint Presets
03 Customization
Gradient Tracks
Dark Mode Switch
Fully Custom (unstyled)
04 Accessibility
Built-in ARIA
Renders with role="switch" and aria-checked that updates automatically. Labels are
associated via id, and helper text is linked
through aria-describedby.
Keyboard
Tab to focus, Space to toggle. The focus ring uses peer-focus-visible: to relay the hidden input's focus
state onto the visible track.
Reduced Motion
The thumb slide animation and all Mint effects are suppressed when prefers-reduced-motion is enabled.
Don't wrap with <label>
Toggle already renders a correctly associated <label> internally. Wrapping it in another <label> creates
nested label semantics — clicks on the outer label may not toggle the switch reliably across
browsers, and screen readers can announce the label twice.
Don't
<label>
Notifications
<Toggle />
</label>Do
<Toggle label="Notifications"
helper="Email + push" />05 API Reference
No matching properties |