Checkbox

Installation#

pnpmnpmyarnbun
pnpm dlx FlowbyAr@latest add checkbox
Copy

Usage#

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

<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.

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 FlowbyAr/ui, see the RTL configuration guide.

API Reference#

See the Base UI documentation for more information.