Switch

A toggle switch component for binary on/off states.

Verdana Theme

Code

<Switch
  id="dark-mode"
  name="theme-toggle"
  label="Dark Mode"
  checked={false}
/>

Props

Name	Type	Required	Description
`label`	string	Yes	Label text for the switch
`id`	string	Yes	Unique identifier for the switch input
`name`	string	Yes	Name attribute for the switch input
`checked`	boolean	No	Whether the switch is checked by default Default: `false`

Usage

✅ Do’s

Use for binary settings (on or off) that take immediate effect
Provide clear, concise labels

❌ Don’t’s

Don’t use for actions that require confirmation
Don’t use for multiple options (use radio buttons instead)
Don’t use for settings that don’t take immediate effect
Don’t use for destructive actions

Accessibility

Keyboard Navigation

Tab key moves focus to the switch
Space toggles the switch state
Switch can be activated by clicking both the control and the label

Screen Reader Support

The switch context is announced to screen readers
Uses standard checkbox input with an associated label
Uses role="switch" to indicate the switch’s binary state
The visual control element has aria-hidden to avoid verbose announcements