Astro Checkbox Component

Accept terms and conditions

By clicking this checkbox, you agree to the terms.

Enable notifications

Enable notifications You can enable or disable notifications at any time.

---
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 for="toggle-checkbox-2">
    <Field as="span" orientation="horizontal">
      <Checkbox
        id="toggle-checkbox-2"
        name="toggle-checkbox-2"
        aria-labelledby="toggle-checkbox-2-title"
        aria-describedby="toggle-checkbox-2-description"
      />
      <FieldContent as="span">
        <FieldTitle as="span" id="toggle-checkbox-2-title">
          Enable notifications
        </FieldTitle>
        <FieldDescription as="span" id="toggle-checkbox-2-description">
          You can enable or disable notifications at any time.
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</FieldGroup>

Installation

Usage

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.

Accept terms and conditions

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

Accept terms and conditions

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

Accept terms and conditions

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.

Enable notifications

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

Show these items on the desktop:

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

---
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	Email	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"
          aria-label="Select all rows"
          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`}
            aria-label={`Select ${row.name}`}
            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 for="toggle-checkbox-rtl-2">
    <Field as="span" orientation="horizontal">
      <Checkbox
        id="toggle-checkbox-rtl-2"
        name="toggle-checkbox-2"
        aria-labelledby="toggle-checkbox-rtl-2-title"
        aria-describedby="toggle-checkbox-rtl-2-description"
      />
      <FieldContent as="span">
        <FieldTitle as="span" id="toggle-checkbox-rtl-2-title">
          {t.enableNotifications}
        </FieldTitle>
        <FieldDescription as="span" id="toggle-checkbox-rtl-2-description">
          {t.enableNotificationsDescription}
        </FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</FieldGroup>

API Reference

Checkbox accepts every input attribute except type, such as checked, disabled, required, name, value and aria-invalid.

Menu

Installation

Usage

Checked State

Invalid State

Basic

Description

Disabled

Group

Table

RTL

API Reference