Forms · astro-ui · Switch

Switch

On/off toggle built on a native checkbox with role=switch.

Switch is an on/off toggle built on a native checkbox carrying role=“switch” — screen readers announce On/Off, Tab and Space work natively, and the form value is a real checkbox value.

← All components

Features

  • role="switch" with On/Off announcements
  • rounded (default) or square track
  • 5 sizes, 9 color variants
  • label prop or slot content
  • invalid support with describedby

Usage

---
import { Switch } from "astro-ui";
---

<Switch name="wifi" checked>Wi-Fi</Switch>

Demos

Basic

<Switch name="wifi" checked>Wi-Fi</Switch>
<Switch name="bluetooth">Bluetooth</Switch>
<Switch name="airplane" disabled>Airplane mode</Switch>

Shapes & sizes

<Switch shape="square" checked label="Square" />
<Switch size="sm" checked label="Small" />

API

Props

PropTypeDefaultDescription
name / valuestring—Native form fields.
checkedbooleanfalseInitial state.
shape"rounded" | "square""rounded"Track shape.
labelstring—Text after the thumb when no slot.
size"xs" | "sm" | "md" | "lg" | "xl""md"Scale.
variant"primary" | … | "inherit""primary"Track accent color.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • role="switch" on a native checkbox — announces on/off state
  • Space toggles; aria-invalid + aria-describedby for validation

FAQ

Switch or Checkbox?

Switch = immediate effect (settings toggle). Checkbox = submit-time selection. They're built on the same native input, so either submits identically.

Changelog

Version history mentioning Switch.

v0.1.0 — 2026-11-11
added
  • Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.