---
title: "Checkbox"
description: "A single checkbox with an associated label and optional error message."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/checkbox"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/checkbox.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Checkbox

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

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

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | — | Unique input ID; connects the input to its label element |
| `error` | `ReactNode` | no | — | Error message displayed below the checkbox |
| `label` | `ReactNode` | no | — | Label displayed next to the checkbox |

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

## Usage

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

export default () => {
	return (
		<div className="flex flex-col gap-32 max-w-md">
			<Checkbox
				id="checkbox-example-1"
				name="checkbox"
				label="Checkbox with label"
			/>
			<Checkbox
				id="checkbox-example-5"
				name="checkbox"
				label="Checkbox with label (checked)"
				defaultChecked
			/>
			<Checkbox
				id="checkbox-example-2"
				label="Checkbox with long label. Eu do voluptate minim qui culpa reprehenderit enim elit laboris eiusmod consectetur"
			/>
			<Checkbox
				id="checkbox-example-3"
				label="Checkbox with error"
				error="Esse dolor in nostrud elit incididunt voluptate"
			/>
			<Checkbox
				id="checkbox-example-6"
				label="Checkbox with error (checked)"
				error="Esse dolor in nostrud elit incididunt voluptate"
				defaultChecked
			/>
			<Checkbox
				id="checkbox-example-4"
				label="Checkbox with long error"
				error="Et et dolore ut excepteur voluptate incididunt commodo et minim cillum velit do officia. Sint cupidatat pariatur pariatur labore minim."
			/>
		</div>
	)
}
```