By clicking this checkbox, you agree to the terms.
---
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"
---
<FieldGroup class="max-w-sm">
<Field orientation="horizontal">
<Checkbox id="terms-checkbox" name="terms-checkbox" />
<Label for="terms-checkbox">Accept terms and conditions</Label>
</Field>
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-2" name="terms-checkbox-2" checked />
<FieldContent>
<FieldLabel for="terms-checkbox-2">
Accept terms and conditions
</FieldLabel>
<FieldDescription>
By clicking this checkbox, you agree to the terms.
</FieldDescription>
</FieldContent>
</Field>
<Field orientation="horizontal" data-disabled>
<Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
<FieldLabel for="toggle-checkbox">Enable notifications</FieldLabel>
</Field>
<FieldLabel>
<Field as="span" orientation="horizontal">
<Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
<FieldContent as="span">
<FieldTitle as="span">Enable notifications</FieldTitle>
<FieldDescription as="span">
You can enable or disable notifications at any time.
</FieldDescription>
</FieldContent>
</Field>
</FieldLabel>
</FieldGroup>Installation
npx shadcn@latest add @fulldev/checkboxUsage
import { Checkbox } from "@/components/ui/checkbox"<Checkbox />Checkbox renders a native input type="checkbox" and accepts its
attributes, so it submits with a form and works without JavaScript.
Checked State
Use the native checked attribute for the initial state. Read or set
input.checked and listen to the native change event to react to changes.
Set input.indeterminate = true in a script for the indeterminate state.
Invalid State
Set aria-invalid="true" on the checkbox and data-invalid on the field
wrapper to show the invalid styles.
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---
<FieldGroup class="mx-auto w-56">
<Field orientation="horizontal" data-invalid>
<Checkbox
id="terms-checkbox-invalid"
name="terms-checkbox-invalid"
aria-invalid="true"
/>
<FieldLabel for="terms-checkbox-invalid">
Accept terms and conditions
</FieldLabel>
</Field>
</FieldGroup>Basic
Pair the checkbox with Field and FieldLabel for proper layout and labeling.
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---
<FieldGroup class="mx-auto w-56">
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-basic" name="terms-checkbox-basic" />
<FieldLabel for="terms-checkbox-basic">
Accept terms and conditions
</FieldLabel>
</Field>
</FieldGroup>Description
Use FieldContent and FieldDescription for helper text.
By clicking this checkbox, you agree to the terms and conditions.
---
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"
---
<FieldGroup class="mx-auto w-72">
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-desc" name="terms-checkbox-desc" checked />
<FieldContent>
<FieldLabel for="terms-checkbox-desc">
Accept terms and conditions
</FieldLabel>
<FieldDescription>
By clicking this checkbox, you agree to the terms and conditions.
</FieldDescription>
</FieldContent>
</Field>
</FieldGroup>Disabled
Use the disabled attribute to prevent interaction and add data-disabled to
the Field for disabled styles.
---
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
---
<FieldGroup class="mx-auto w-56">
<Field orientation="horizontal" data-disabled>
<Checkbox
id="toggle-checkbox-disabled"
name="toggle-checkbox-disabled"
disabled
/>
<FieldLabel for="toggle-checkbox-disabled">Enable notifications</FieldLabel>
</Field>
</FieldGroup>Group
Use multiple fields to create a checkbox list.
---
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSet,
} from "@/components/ui/field"
---
<FieldSet>
<FieldLegend variant="label">Show these items on the desktop:</FieldLegend>
<FieldDescription>
Select the items you want to show on the desktop.
</FieldDescription>
<FieldGroup class="gap-3">
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-hard-disks-ljj-checkbox"
name="finder-pref-9k2-hard-disks-ljj-checkbox"
checked
/>
<FieldLabel
for="finder-pref-9k2-hard-disks-ljj-checkbox"
class="font-normal"
>
Hard disks
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-external-disks-1yg-checkbox"
name="finder-pref-9k2-external-disks-1yg-checkbox"
checked
/>
<FieldLabel
for="finder-pref-9k2-external-disks-1yg-checkbox"
class="font-normal"
>
External disks
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-cds-dvds-fzt-checkbox"
name="finder-pref-9k2-cds-dvds-fzt-checkbox"
/>
<FieldLabel
for="finder-pref-9k2-cds-dvds-fzt-checkbox"
class="font-normal"
>
CDs, DVDs, and iPods
</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox
id="finder-pref-9k2-connected-servers-6l2-checkbox"
name="finder-pref-9k2-connected-servers-6l2-checkbox"
/>
<FieldLabel
for="finder-pref-9k2-connected-servers-6l2-checkbox"
class="font-normal"
>
Connected servers
</FieldLabel>
</Field>
</FieldGroup>
</FieldSet>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 { Checkbox } from "@/components/ui/checkbox"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/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",
},
]
const selectedRows = new Set(["1"])
---
<Table data-checkbox-table>
<TableHeader>
<TableRow>
<TableHead class="w-8">
<Checkbox
id="select-all-checkbox"
name="select-all-checkbox"
checked={selectedRows.size === tableData.length}
data-select-all
/>
</TableHead>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{tableData.map((row) => (
<TableRow data-state={selectedRows.has(row.id) ? "selected" : undefined}>
<TableCell>
<Checkbox
id={`row-${row.id}-checkbox`}
name={`row-${row.id}-checkbox`}
checked={selectedRows.has(row.id)}
data-select-row
/>
</TableCell>
<TableCell class="font-medium">{row.name}</TableCell>
<TableCell>{row.email}</TableCell>
<TableCell>{row.role}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<script>
const initialize = () => {
for (const table of document.querySelectorAll("[data-checkbox-table]")) {
if (table.hasAttribute("data-bound")) continue
table.setAttribute("data-bound", "")
const all = table.querySelector<HTMLInputElement>("[data-select-all]")
const rows = [
...table.querySelectorAll<HTMLInputElement>("[data-select-row]"),
]
const update = () => {
for (const row of rows) {
const tr = row.closest("tr")
if (row.checked) tr?.setAttribute("data-state", "selected")
else tr?.removeAttribute("data-state")
}
if (all) all.checked = rows.every((row) => row.checked)
}
all?.addEventListener("change", () => {
for (const row of rows) row.checked = all.checked
update()
})
for (const row of rows) row.addEventListener("change", update)
}
}
initialize()
document.addEventListener("astro:page-load", initialize)
</script>RTL
بالنقر على هذا المربع، فإنك توافق على الشروط.
---
import { Checkbox } from "@/components/ui/checkbox"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"
const translations = {
en: {
dir: "ltr",
values: {
acceptTerms: "Accept terms and conditions",
acceptTermsDescription:
"By clicking this checkbox, you agree to the terms.",
enableNotifications: "Enable notifications",
enableNotificationsDescription:
"You can enable or disable notifications at any time.",
},
},
ar: {
dir: "rtl",
values: {
acceptTerms: "قبول الشروط والأحكام",
acceptTermsDescription: "بالنقر على هذا المربع، فإنك توافق على الشروط.",
enableNotifications: "تفعيل الإشعارات",
enableNotificationsDescription:
"يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.",
},
},
he: {
dir: "rtl",
values: {
acceptTerms: "קבל תנאים והגבלות",
acceptTermsDescription:
"על ידי לחיצה על תיבת הסימון הזו, אתה מסכים לתנאים.",
enableNotifications: "הפעל התראות",
enableNotificationsDescription:
"אתה יכול להפעיל או להשבית התראות בכל עת.",
},
},
}
const { dir, values: t } = translations.ar
---
<FieldGroup class="max-w-sm" dir={dir}>
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-rtl" name="terms-checkbox" />
<Label for="terms-checkbox-rtl">{t.acceptTerms}</Label>
</Field>
<Field orientation="horizontal">
<Checkbox id="terms-checkbox-2-rtl" name="terms-checkbox-2" checked />
<FieldContent>
<FieldLabel for="terms-checkbox-2-rtl">{t.acceptTerms}</FieldLabel>
<FieldDescription>{t.acceptTermsDescription}</FieldDescription>
</FieldContent>
</Field>
<Field orientation="horizontal" data-disabled>
<Checkbox id="toggle-checkbox-rtl" name="toggle-checkbox" disabled />
<FieldLabel for="toggle-checkbox-rtl">{t.enableNotifications}</FieldLabel>
</Field>
<FieldLabel>
<Field as="span" orientation="horizontal">
<Checkbox id="toggle-checkbox-rtl-2" name="toggle-checkbox-2" />
<FieldContent as="span">
<FieldTitle as="span">{t.enableNotifications}</FieldTitle>
<FieldDescription as="span">
{t.enableNotificationsDescription}
</FieldDescription>
</FieldContent>
</Field>
</FieldLabel>
</FieldGroup>API Reference
Source: src/components/ui/checkbox
Checkbox accepts every input attribute except type, such as checked,
disabled, required, name, value and aria-invalid.