Checkbox

A single checkbox with an associated label and optional error message. 

import { Checkbox } from "@sanity/sanity-id/components/checkbox"

Props

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

Checkbox props
PropTypeDescription
id (required)string

Unique input ID; connects the input to its label element

errorReactNode

Error message displayed below the checkbox

labelReactNode

Label displayed next to the checkbox

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 { Checkbox } from "@sanity/sanity-id/components/checkbox"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-32 max-w-md">
6            <Checkbox
7              id="checkbox-example-1"
8              name="checkbox"
9              label="Checkbox with label"
10            />
11            <Checkbox
12              id="checkbox-example-5"
13              name="checkbox"
14              label="Checkbox with label (checked)"
15              defaultChecked
16            />
17            <Checkbox
18              id="checkbox-example-2"
19              label="Checkbox with long label. Eu do voluptate minim qui culpa reprehenderit enim elit laboris eiusmod consectetur"
20            />
21            <Checkbox
22              id="checkbox-example-3"
23              label="Checkbox with error"
24              error="Esse dolor in nostrud elit incididunt voluptate"
25            />
26            <Checkbox
27              id="checkbox-example-6"
28              label="Checkbox with error (checked)"
29              error="Esse dolor in nostrud elit incididunt voluptate"
30              defaultChecked
31            />
32            <Checkbox
33              id="checkbox-example-4"
34              label="Checkbox with long error"
35              error="Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim."
36            />
37          </div>
38        )
39      }