Toggle

Native checkbox styled as a switch using data-variant="switch". No custom JavaScript needed for the visual toggle.

Live Examples

Off
On
On
Off
Off

HTML Structure

<div class="field" data-type="toggle">
				<label for="switch">Feature Name</label>
				<input type="checkbox"
				id="switch"
				data-variant="switch"
				aria-label="Enable feature">
				<span class="status" data-state="off">Off</span>
				</div>

Data Attributes

  • `data-type="toggle"` - Container for toggle field
  • `data-variant="switch"` - Checkbox styled as switch
  • `data-state="on|off"` - Current state indicator

ARIA Attributes

  • `aria-label` - Describes toggle purpose to screen readers
  • `aria-checked` - Implicit from native checkbox element
  • `aria-disabled` - Implicit from disabled attribute

Key Features

  • Native Checkbox - Built on semantic HTML5 input
  • Binary State - On/off switch control
  • Smooth Animation - Fluid thumb movement with CSS transition
  • Status Indicator - Show current state with data-state
  • Keyboard Support - Space to toggle, Tab navigation
  • Accessible - Full ARIA support and labels
  • Hover Effects - Visual feedback
  • Disabled State - Support for disabled toggles

Use Cases

  • Settings - Feature toggles and options
  • Preferences - User preferences and profile settings
  • Notifications - Enable/disable alerts and notifications
  • Theme Switcher - Dark/light mode toggle
  • Permissions - Access control and sharing permissions
  • Features - Beta or experimental feature flags
  • Privacy - Data collection and privacy options

Best Practices

  • Clear Labels - Describe what the toggle controls
  • Status Display - Show On/Off state adjacent to toggle
  • Immediate Feedback - Respond instantly to user action
  • Consistent Styling - Match component design system
  • Touch-Friendly Size - Minimum 44×44px for mobile
  • Save State - Persist user preference in storage
  • Keyboard Support - Full keyboard navigation with Tab and Space
  • Focus Indicator - Visible outline for keyboard focus

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Accessibility

Axiom01 ensures that the Toggle component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.