Checkbox

A control that toggles between checked, unchecked and indeterminate.

Accept the terms of service

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";

export default function CheckboxBasic() {
  return (
    <Field orientation="horizontal" className="max-w-sm">
      <Checkbox id="accept-terms" />
      <FieldLabel htmlFor="accept-terms">Accept the terms of service</FieldLabel>
    </Field>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add checkbox
pnpm dlx shadcn@latest add @jarvis/checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";

export function TermsCheckbox() {
  return (
    <Field orientation="horizontal">
      <Checkbox />
      <FieldLabel>Accept the terms of service</FieldLabel>
    </Field>
  );
}

Label a checkbox with a FieldLabel in a horizontal Field. Without visible text, give it an aria-label. For several checkboxes with one shared value, use Checkbox Group.

Examples

With a description

Subscribe to the newsletter

One email a month. Unsubscribe at any time.

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field";

export default function CheckboxWithDescription() {
  return (
    <Field orientation="horizontal" className="max-w-sm">
      <Checkbox id="newsletter" defaultChecked />
      <FieldContent>
        <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
        <FieldDescription>One email a month. Unsubscribe at any time.</FieldDescription>
      </FieldContent>
    </Field>
  );
}

States

Use defaultChecked, or checked with onCheckedChange to control it. indeterminate shows a dash for a partial selection, and aria-invalid marks the checkbox as invalid.

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

export default function CheckboxStates() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Checkbox aria-label="Unchecked" />
      <Checkbox defaultChecked aria-label="Checked" />
      <Checkbox indeterminate aria-label="Indeterminate" />
      <Checkbox disabled aria-label="Disabled" />
      <Checkbox disabled defaultChecked aria-label="Disabled and checked" />
      <Checkbox aria-invalid aria-label="Invalid" />
    </div>
  );
}

Props

Part	Extends
Checkbox	Base UI's Checkbox.Root

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Checkbox

Prop	Type	Default
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.	`boolean`	`false`
`id` The id of the input element.	`string`	—
`name` Identifies the field when a form is submitted.	`string`	`undefined`
`form` Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.	`string`	—
`checked` Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead.	`boolean`	`undefined`
`defaultChecked` Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead.	`boolean`	`false`
`disabled` Whether the component should ignore user interaction.	`boolean`	`false`
`onCheckedChange` Event handler called when the checkbox is ticked or unticked.	`((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void)`	—
`readOnly` Whether the user should be unable to tick or untick the checkbox.	`boolean`	`false`
`required` Whether the user must tick the checkbox before submitting a form.	`boolean`	`false`
`indeterminate` Whether the checkbox is in a mixed state: neither ticked, nor unticked.	`boolean`	`false`
`inputRef` A ref to access the hidden `<input>` element.	`React.Ref<HTMLInputElement>`	—
`parent` Whether the checkbox controls a group of child checkboxes. Must be used in a Checkbox Group.	`boolean`	`false`
`uncheckedValue` The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.	`string`	—
`value` The checkbox's value. Identifies it within a Checkbox Group, falling back to `name` when omitted. When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on".	`string`	—