Components

Switch

Switches toggle a single setting on or off. The change takes effect immediately.

Stable

Enable notifications

Receive updates via email.

Anatomy

import {Switch} from '@staffbase/design';

<Switch />

Renders a toggle that switches a single setting on or off. Pair it with Field to associate a label and description.

Name	Type	Description
`checked`	`boolean`	The controlled checked state of the switch. Use together with onCheckedChange.
`defaultChecked`	`boolean`	The checked state of the switch when it is initially rendered. Use when you do not need to control its state. Default: `false`
`onCheckedChange`	`(checked: boolean, event: Event) => void`	Callback fired when the checked state changes.
`disabled`	`boolean`	Whether the switch should ignore user interaction. Default: `false`
`readOnly`	`boolean`	Whether the user should be unable to change the checked state. Default: `false`
`required`	`boolean`	Whether the switch must be checked before an owning form can be submitted. Default: `false`
`name`	`string`	Identifies the switch when a form is submitted.