ComponentsForms & inputs

Switch

An on/off setting that applies immediately: maintenance mode, online bookings, active/inactive in a table row. Two sizes, label + description on either side, and a loading state for optimistic saves.

Radix Switch components/switch.tsx, components/spinner.tsx, styles/forms.csstheme · material · accent · density · font

Accept online bookingsGuests can reserve a table from your website.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Switch } from "@vamos-ui/react";

<Switch label="Accept online bookings" description="Guests can reserve from your website." defaultChecked />

Switches apply instantly. If a change only takes effect after Save, use a Checkbox instead.

The thumb uses --accent-fg when on, so it stays visible on every accent (graphite in dark mode included). Thumb travel follows --dir for RTL.

Examples

Settings rows

labelPosition="start" puts the label first and the switch at the far end — the settings-page pattern.

Website

kadikoyroasters.com

Maintenance modeVisitors see a holding page. Signed-in staff can still browse.

Comments on new postsApplies to posts published from now on.

Submit sitemap automaticallyNotify search engines when you publish or update a page.

Cookie-free analyticsPage views without a consent banner. Managed by your plan.

Optimistic save

Flip immediately, lock with loading (aria-busy, spinner in the thumb), revert on error and announce the result in a live region. Every second save fails here.

Weekly pipeline summaryEvery Monday at 9:00 to the whole sales team.

In a table row

size="sm" for dense rows; give each switch an aria-label that names the row.

Staff member	Role	Bookable
Elif Kaya	Head chef
Mert Demir	Sommelier
Zeynep Çelik	Front of house
Can Öztürk	Pastry

Sizes & states

md 36×20, sm 28×16; loading, disabled, read-only and a Field error.

API

Switch

Prop	Type	Default
`checked` Controlled state.	`boolean`	`—`
`defaultChecked` Initial state (uncontrolled).	`boolean`	`false`
`onCheckedChange` Called with the next state.	`(checked: boolean) => void`	`—`
`label` Names the switch; clicking it toggles.	`ReactNode`	`—`
`description` Second line, linked with aria-describedby.	`ReactNode`	`—`
`labelPosition` start = label first, switch at the far end.	`"start" \| "end"`	`"end"`
`size` 28×16 or 36×20 px.	`"sm" \| "md"`	`"md"`
`loading` Spinner in the thumb, aria-busy, changes locked.	`boolean`	`—`
`invalid` Danger outline + aria-invalid. Set by Field error.	`boolean`	`—`
`readOnly` Focusable but can't be flipped.	`boolean`	`—`
`name / value` Form submission (hidden input).	`string`	`value "on"`
`controlClassName` Classes for the track when label is used.	`string`	`—`

Process / steps

Table