Checkbox

Basic

A checkbox paired with a Label so the text is a click target too.

Accept terms and conditions

Import the parts you need from the component's folder.

ts

import { Checkbox } from "@/components/ui/checkbox";

Wrap the label and a FieldDescription in FieldContent for a helper line.

Sync Desktop & Documents folders

Your Desktop and Documents folders are kept in sync across every device you sign in on.

Use the disabled prop to disable the checkbox.

Disabled

Disabled and checked

Set aria-invalid on the Checkbox and pair it with a FieldError for validation.

Accept terms and conditions

You must accept the terms before continuing.

Stack several checkboxes in a FieldSet, each bound to its own ref.

Sidebar

Choose which sections appear in the navigation sidebar.

Projects

Recents

Favorites

Trash

A header checkbox goes indeterminate when only some rows are selected.

Prop	Type	Default	Description
`modelValue`	`boolean \| 'indeterminate'`	—	Checked state. Supports v-model.
`defaultValue`	`boolean \| 'indeterminate'`	`false`	Initial state when v-model is not used.
`disabled`	`boolean`	`false`	Disable input.
`id`	`string`	—	Match with Label for prop.

Event	Description
`update:modelValue`	Fires with the new checked state. Enables v-model.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	Toggles the checkbox when focused.
`Tab`	Moves focus to or from the checkbox.