Switch

A toggle for an on/off setting, wired to its label and optional error text. 

import { Switch } from "@sanity/sanity-id/components/switch"

Props

Also accepts every prop of Omit<ComponentProps<"input">, "type">.

Switch props
PropTypeDescription
id (required)string

Unique input ID; connects the input to its label element

errorReactNode

Error message displayed below the switch

labelReactNode

Label displayed next to the switch

Required.

Usage

Esse dolor in nostrud elit incididunt voluptate

Esse dolor in nostrud elit incididunt voluptate

Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim.

1import { Switch } from "@sanity/sanity-id/components/switch"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-32 max-w-md">
6            <Switch id="switch-example-1" label="Switch with label" />
7            <Switch
8              id="switch-example-2"
9              label="Switch with label (checked)"
10              defaultChecked
11            />
12            <Switch
13              id="switch-example-3"
14              label="Switch with long label. Voluptate deserunt pariatur consequat nulla laborum"
15            />
16            <Switch
17              id="switch-example-4"
18              label="Switch with error"
19              error="Esse dolor in nostrud elit incididunt voluptate"
20            />
21            <Switch
22              id="switch-example-5"
23              label="Switch with error (checked)"
24              error="Esse dolor in nostrud elit incididunt voluptate"
25              defaultChecked
26            />
27            <Switch
28              id="switch-example-6"
29              label="Switch with long error"
30              error="Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim."
31            />
32          </div>
33        )
34      }