Switch

A native <input type="checkbox" role="switch"> with a switch look — no JavaScript. It submits with forms, resets, works with Space and Tab, and screen readers announce it as an on/off switch.

Notifications

Notifications (inset)

Off

Off (inset)

---
import { Switch } from 'bws-astro-ui';
---

<Switch name="notifications" label="Notifications" checked />
<Switch name="notifications" label="Notifications" inset />

The default look is Vuetify’s: a slim track with a thumb overhanging it. inset is the Material 3 look: a wide track with the thumb inside, growing when it’s on.

Colors and states

Secondary

Success, inset

Disabled

Dark mode

Applies to every page

color is the color of the switch when it’s on.

Label with a link

The default slot replaces label with richer content:

I’ve read the privacy policy

<Switch name="privacy">
  I've read the <a href="/privacy" class="text-primary underline">privacy policy</a>
</Switch>

In a form

A switch submits its value (on by default) only when it’s on — like any checkbox. In a Form, required means it has to be on, e.g. to accept terms:

<Form method="post">
  <Switch name="terms" label="I accept the terms" rules={[required('Accept the terms')]} />
  <Button type="submit">Send</Button>
</Form>

On the server, validateForm sees an unchecked switch as empty, so the same rule applies.

API

Prop	Type	Default
label	string	—
color	primary · secondary · success · warning · info · error	primary
inset	boolean — Material 3 look	false
checked	boolean — on initially	false
name, value	string — what the form submits (value defaults to on)	—
hint	string	—
error	string — starts out invalid	—
rules	validation rules — required means on	—
disabled	boolean	false
id, class	string — class goes to the wrapper	—

Any other attribute goes to the <input>. Slot: default — the label, replacing label.