Switch

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

Interactive docs and examples: Switch in Storybook.

Switch props

Prop	Type	Default
`checked?`	`boolean`
`className?`	`string`
`defaultChecked?`	`boolean`	`false`
`disabled?`	`boolean`
`label?`	`ReactNode`
`onCheckedChange?`	`(checked: boolean) => void`
`size?`	`"lg" \| "md" \| "sm"`	`'md'`

Also accepts the standard attributes of ButtonHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Bare: Bare switch with no visible label — requires aria-label for accessibility.
Labeled: Labeled switch using the built-in label prop (no Field wrapper).
With Field: Bare switch inside a Field — Field.Control injects aria-labelledby pointing at Field.Label, providing the accessible name. This works because <button> is not a labelable element, so htmlFor alone would not associate the label.
Bare With Field: Minimal Field integration — bare switch with label provided by Field.Label.
With Field Error: Error state — aria-invalid is injected by Field.Control and the switch track displays a danger-coloured border for visual feedback.
Multiple Options: Related switches should be grouped in a <fieldset> with a <legend> so screen reader users understand the switches belong together.

Other stories: Basic, Checked By Default, Disabled, Disabled Checked, Controlled, Sizes (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.