# Checkbox

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex flex-col gap-6 not-content"> <div class="flex items-center gap-3"> <Checkbox id="terms" /> <Label for="terms">Accept terms and conditions</Label> </div> <div class="flex items-start gap-3"> <Checkbox id="terms-2" defaultChecked /> <div class="grid gap-2"> <Label for="terms-2">Accept terms and conditions</Label> <p class="text-muted-foreground text-sm"> By clicking this checkbox, you agree to the terms and conditions. </p> </div> </div> <div class="flex items-center gap-3"> <Checkbox id="toggle" disabled /> <Label for="toggle">Enable notifications</Label> </div> <Label class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 dark:has-[:checked]:border-blue-900 dark:has-[:checked]:bg-blue-950" > <Checkbox id="toggle-2" defaultChecked class="checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700" /> <div class="grid gap-1.5 font-normal"> <p class="text-sm leading-none font-medium">Enable notifications</p> <p class="text-muted-foreground text-sm"> You can enable or disable notifications at any time. </p> </div> </Label> </div>
</div>

```astro
---
---

<div class="flex flex-col gap-6 not-content">
<div class="flex items-center gap-3">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

<div class="flex items-start gap-3">
  <Checkbox id="terms-2" defaultChecked />
  <div class="grid gap-2">
    <Label for="terms-2">Accept terms and conditions</Label>
    <p class="text-muted-foreground text-sm">
      By clicking this checkbox, you agree to the terms and conditions.
    </p>
  </div>
</div>

<div class="flex items-center gap-3">
  <Checkbox id="toggle" disabled />
  <Label for="toggle">Enable notifications</Label>
</div>

<Label
  class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 dark:has-[:checked]:border-blue-900 dark:has-[:checked]:bg-blue-950"
>
  <Checkbox
    id="toggle-2"
    defaultChecked
    class="checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700"
  />
  <div class="grid gap-1.5 font-normal">
    <p class="text-sm leading-none font-medium">Enable notifications</p>
    <p class="text-muted-foreground text-sm">
      You can enable or disable notifications at any time.
    </p>
  </div>
</Label>
</div>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add checkbox
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add checkbox
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add checkbox
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add checkbox
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<div class="flex items-center gap-3">
  <Checkbox id="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>
```