Switch Component — Astro

Accessible toggle switch with role=switch

Switch Component

An accessible on/off toggle using role="switch" and aria-checked. Keyboard: Space toggles. Fully themeable.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Props

  • id, name (string, optional) - For form association
  • checked (boolean, optional) - Default: false
  • disabled (boolean, optional)
  • label (string, optional) - Visible label next to the switch
  • class (string, optional)

Basic Usage

Live Example

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

Checked and Disabled

Live Example

Accessibility

  • role="switch" and aria-checked for correct screen reader announcement
  • Focus visible on the track when the input is focused
  • Space toggles the switch

Other frameworks: Vanilla · Svelte · Vue · React