Installation
pnpm dlx shadcn@latest add @cortexcn/checkboxUsage
import { Checkbox } from "@/components/checkbox";Examples
Basic
import { Checkbox } from "@/components/checkbox"import { Field, FieldLabel } from "@/components/field"export function CheckboxBasic() { return ( <div className="flex flex-col gap-6"> <Field orientation="horizontal"> <Checkbox id="terms" /> <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel> </Field> </div> )}With description
By clicking this checkbox, you agree to the terms and conditions.
import { Checkbox } from "@/components/checkbox"import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/field"export function CheckboxWithDescription() { return ( <div className="flex flex-col gap-6"> <Field orientation="horizontal"> <Checkbox id="terms-2" defaultChecked /> <FieldContent> <FieldLabel htmlFor="terms-2">Accept terms and conditions</FieldLabel> <FieldDescription> By clicking this checkbox, you agree to the terms and conditions. </FieldDescription> </FieldContent> </Field> </div> )}Invalid
import { Checkbox } from "@/components/checkbox"import { Field, FieldLabel } from "@/components/field"export function CheckboxInvalid() { return ( <div className="flex flex-col gap-6"> <Field orientation="horizontal" data-invalid> <Checkbox id="terms-3" aria-invalid /> <FieldLabel htmlFor="terms-3">Accept terms and conditions</FieldLabel> </Field> </div> )}Disabled
import { Checkbox } from "@/components/checkbox"import { Field, FieldLabel } from "@/components/field"export function CheckboxDisabled() { return ( <div className="flex flex-col gap-6"> <Field orientation="horizontal"> <Checkbox id="toggle" disabled /> <FieldLabel htmlFor="toggle">Enable notifications</FieldLabel> </Field> </div> )}With title
import { Checkbox } from "@/components/checkbox"import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldTitle } from "@/components/field"export function CheckboxWithTitle() { return ( <div className="flex flex-col gap-6"> <FieldGroup> <FieldLabel htmlFor="toggle-2"> <Field orientation="horizontal"> <Checkbox id="toggle-2" defaultChecked /> <FieldContent> <FieldTitle>Enable notifications</FieldTitle> <FieldDescription> You can enable or disable notifications at any time. </FieldDescription> </FieldContent> </Field> </FieldLabel> <FieldLabel htmlFor="toggle-4"> <Field orientation="horizontal" data-disabled> <Checkbox id="toggle-4" disabled /> <FieldContent> <FieldTitle>Enable notifications</FieldTitle> <FieldDescription> You can enable or disable notifications at any time. </FieldDescription> </FieldContent> </Field> </FieldLabel> </FieldGroup> </div> )}In table
| 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 |
import * as React from "react"import { Checkbox } from "@/components/checkbox"import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/table"const tableData = [ { id: "1", name: "Sarah Chen", email: "sarah.chen@example.com", role: "Admin", }, { id: "2", name: "Marcus Rodriguez", email: "marcus.rodriguez@example.com", role: "User", }, { id: "3", name: "Priya Patel", email: "priya.patel@example.com", role: "User", }, { id: "4", name: "David Kim", email: "david.kim@example.com", role: "Editor", },]export function CheckboxInTable() { const [selectedRows, setSelectedRows] = React.useState<Set<string>>( new Set(["1"]) ) const selectAll = selectedRows.size === tableData.length const handleSelectAll = (checked: boolean) => { if (checked) { setSelectedRows(new Set(tableData.map((row) => row.id))) } else { setSelectedRows(new Set()) } } const handleSelectRow = (id: string, checked: boolean) => { const newSelected = new Set(selectedRows) if (checked) { newSelected.add(id) } else { newSelected.delete(id) } setSelectedRows(newSelected) } return ( <div className="flex flex-col gap-6"> <Table> <TableHeader> <TableRow> <TableHead className="w-8"> <Checkbox id="select-all" checked={selectAll} onCheckedChange={handleSelectAll} /> </TableHead> <TableHead>Name</TableHead> <TableHead>Email</TableHead> <TableHead>Role</TableHead> </TableRow> </TableHeader> <TableBody> {tableData.map((row) => ( <TableRow key={row.id} data-state={selectedRows.has(row.id) ? "selected" : undefined} > <TableCell> <Checkbox id={`row-${row.id}`} checked={selectedRows.has(row.id)} onCheckedChange={(checked) => handleSelectRow(row.id, checked === true) } /> </TableCell> <TableCell className="font-medium">{row.name}</TableCell> <TableCell>{row.email}</TableCell> <TableCell>{row.role}</TableCell> </TableRow> ))} </TableBody> </Table> </div> )}Group
import { Checkbox } from "@/components/checkbox"import { Field, FieldLabel } from "@/components/field"export function CheckboxGroup() { return ( <div className="flex flex-col gap-6"> <Field> <FieldLabel>Show these items on the desktop:</FieldLabel> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-hard-disks-ljj" /> <FieldLabel htmlFor="finder-pref-9k2-hard-disks-ljj" className="font-normal" > Hard disks </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-external-disks-1yg" /> <FieldLabel htmlFor="finder-pref-9k2-external-disks-1yg" className="font-normal" > External disks </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-cds-dvds-fzt" /> <FieldLabel htmlFor="finder-pref-9k2-cds-dvds-fzt" className="font-normal" > CDs, DVDs, and iPods </FieldLabel> </Field> <Field orientation="horizontal"> <Checkbox id="finder-pref-9k2-connected-servers-6l2" /> <FieldLabel htmlFor="finder-pref-9k2-connected-servers-6l2" className="font-normal" > Connected servers </FieldLabel> </Field> </Field> </div> )}Adapted from the shadcn/ui Checkbox (MIT).