Skip to content

Switch

A control that allows the user to toggle a setting on or off. Optimized for accessibility with ARIA switch role.

The Switch component is a visual alternative to a checkbox when used for binary "on/off" settings.

Accessibility Features

  • Role Switch: Uses role="switch" so screen readers announce it as a toggle switch rather than a checkbox.
  • State Announcement: Clear aria-checked state updates.

Usage Example

import { Switch } from '@holmdigital/components'; <div className="flex items-center space-x-2"> <Switch id="airplane-mode" /> <label htmlFor="airplane-mode">Airplane Mode</label> </div>