Loading dashboard...
Loading dashboard...
import { Checkbox } from "@/components/ui/checkbox"<Checkbox />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} />
}Set aria-invalid on the checkbox and data-invalid on the field wrapper to
show the invalid styles.
Pair the checkbox with Field and FieldLabel for proper layout and labeling.
Use FieldContent and FieldDescription for helper text.
By clicking this checkbox, you agree to the terms and conditions.
Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.
Use multiple fields to create a checkbox list.
| Name | Role | ||
|---|---|---|---|
| Sarah Chen | sarah.chen@example.com | Admin | |
| Marcus Rodriguez | marcus.rodriguez@example.com | User | |
| Priya Patel | priya.patel@example.com | User | |
| David Kim | david.kim@example.com | Editor |
See the Base UI documentation for more information.
"use client"
import { Checkbox } from "@/components/ui/checkbox"import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,"use client"
import * as React from "react"