Switch

Status: Stable
Accessibility: Reviewed
Package: tenet-ui@0.5.0
Source: Switch.tsx

import { Switch } from 'tenet-ui';

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>.

Usage guidelines

When to use: an immediate on/off setting that takes effect right away (e.g. “Enable notifications”). For a choice the user confirms later with a Save/Submit button, prefer Checkbox.

Rules

Give it a label via the label prop (or an associated aria-label). A switch with no name is unusable on a screen reader.
It is a real <input type="checkbox" role="switch"> — control it with checked + onChange, or leave it uncontrolled with defaultChecked.
Use caption for a one-line explanation; don’t pile a paragraph next to a toggle.
Use size="small" only in dense rows (e.g. a settings table). Default to medium.
Never build a toggle out of a <div> with an onClick — you lose the role, the checked state, and keyboard support.

Do / Don’t

✅ <Switch label="Enable notifications" defaultChecked />
✅ controlled: <Switch label="Dark mode" checked={dark} onChange={e => setDark(e.target.checked)} />
❌ <Switch> with no label and no aria-label.
❌ Using a Switch for a form value you submit on save — that’s a Checkbox.

Examples

5 stories for Switch, open in Storybook

Default components-switch--default
On components-switch--on
With Caption components-switch--with-caption
Small components-switch--small
Disabled components-switch--disabled

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`label`	`ReactNode`	None	Visible label rendered next to the switch.
`caption`	`ReactNode`	None	Optional helper text under the label.
`size`	`'small' \| 'medium'` SwitchSize	`medium`	Control track / knob scale.
`invalid`	`boolean`	`false`	Mark the field as invalid (sets `aria-invalid` and a danger border).