Checkbox

Installation#

pnpm add @ag/ui

Usage#

import { Checkbox } from "@ag/ui"

<Checkbox />

Checked State#

Use defaultChecked for uncontrolled checkboxes, or checked and onCheckedChange to control the state.

import * as React from "react"

export function Example() {
  const [checked, setChecked] = React.useState(false)

  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Invalid State#

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Examples#

Basic#

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description#

Use FieldContent and FieldDescription for helper text.

Disabled#

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Group#

Use multiple fields to create a checkbox list.

Table#

RTL#

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference#

See the Radix UI documentation for more information.