Switch

An on/off setting, such as a cookie category.

import { Switch } from '@zitdevs/ui';

Examples

Analytics

Counts visits, traffic sources and how the site is used.

InactiveActive

Marketing

Measures campaigns.

InactiveActive

Disponibilidad

InactivoActivo

Compact view

Essential

Needed for the site to work.

import * as es from '@zitdevs/ui/labels/es';

<Switch id="analytics" label="Analítica" showState labels={es.switch} defaultChecked />;

Props

Prop	Type	Default	Notes
id	string	required
name	string	id
value	string	'on'	Submitted while on.
label	string	required	The switch’s name.
description	string	—	Read after the name.
defaultChecked	boolean	false	checked with onChange holds it instead.
showState	boolean	false	The word “Active” or “Inactive” beside the track.
accent	'primary' | 'accent' | 'success' | 'ink'	'primary'	The track’s colour, and the word’s, while on.
size	'md' | 'sm'	'md'	A 52 × 30px or 46 × 26px track.
labels	Partial<SwitchLabels>	English	{ switchOn, switchOff }. es.switch.
ref	Ref<HTMLInputElement>	—	The checkbox.
className	string	—	Placement, on the root.
anything else	<input> attributes	—	On the checkbox: disabled, onChange, form…

Exported types: SwitchProps, SwitchLabels, and the label sets switchLabels. In @zitdevs/ui/labels/es, switch is a reserved word: read it as es.switch from import * as es, or import it as { switch as switchEs }.

Accessibility

• A native type="checkbox" with role="switch": it toggles with Space and a click, and announces “on” or “off” itself.
• The state word is aria-hidden: the switch already says its state, and twice is noise.
• The track draws the focus ring while the invisible checkbox has focus, and holds still for a reader who asks for reduced motion.
• Off, the track is 3:1 against a raised field and against the knob.
• A disabled switch is not submitted: a setting locked on is the server’s to assume.

Without JavaScript

It needs none: the track is drawn from the checkbox’s own :checked, so there is no state to keep in sync. It renders as a Server Component.

Theming

border-control for the track off, the accent’s role on (primary, accent, success, ink); surface-raised for the knob; ink and body for the words, muted for the state word until it takes the accent (ink for success, as green text is 4.1:1); the focus ring.