forms / stable

Switch

32×18 pill toggle that turns cobalt when on, for settings that apply immediately.

LIVE PREVIEW

Loading preview…

When to use

Preferences and feature toggles that save on change (record calls, notifications).

Consider an alternative

Form answers submitted with a Save button — use Checkbox.
Switching between views — use segmented Tabs.

Import

import { Switch } from '@revido-llc/kit';

Keyboard interaction

Space — toggle
Tab — move focus

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


checked	boolean	—	Radix compatibility: prefer `isSelected`.
children	ReactNode	—	Visible label rendered to the right of the track.
className	string	—	Classes for the root. Without `children` the root is the track.
defaultChecked	boolean	—	Radix compatibility: prefer `defaultSelected`.
defaultSelected	boolean	—	Whether the switch is on initially (uncontrolled).
description	ReactNode	—	Help text under the label (only with `children`).
disabled	boolean	—	Radix compatibility: prefer `isDisabled`.
isSelected	boolean	—	Whether the switch is on (controlled).
onChange	((isSelected: boolean) => void)	—	Called with the new on/off state.
onCheckedChange	((checked: boolean) => void)	—	Radix compatibility: prefer `onChange`.
size	"sm" \| "md"	"md"	Track size: sm = 28×16, md = 32×18. Labelled sm keeps a 28px target.
autoFocus	boolean	—	Whether the element should receive focus on render.
form	string	—	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
inputRef	Ref<HTMLInputElement>	—	A ref for the HTML input element.
isDisabled	boolean	—	Whether the input is disabled.
isInvalid	boolean	—	Whether the input value is invalid.
isReadOnly	boolean	—	Whether the input can be selected but not changed by the user.
isRequired	boolean	—	Whether user input is required on the input before form submission.
name	string	—	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
onPress	((e: PressEvent) => void)	—	Handler that is called when the press is released over the target.
render	DOMRenderFunction<"div", SwitchFieldRenderProps>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
validate	((value: boolean) => ValidationError \| true)	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
validationBehavior	"native" \| "aria"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

Examples

States

<Switch>Off</Switch>
<Switch defaultSelected>On</Switch>
<Switch isDisabled>Disabled</Switch>

Compact rail settings

<Switch size="sm" isSelected={billable} onChange={setBillable}>Billable</Switch>

Settings row

Label on the left, switch on the right; the switch carries an aria-label.

<Switch description="Bots join calls with clients.">Record external calls</Switch>
<Switch aria-label="Record internal calls" isSelected={on} onChange={setOn} />

Related components

Checkbox ↗