---
title: Checkbox
description: An easily stylable checkbox component.
links:
  doc: https://base-ui.com/react/components/checkbox
  anatomy: https://base-ui.com/react/components/checkbox#anatomy
  api: https://base-ui.com/react/components/checkbox#api-reference
---

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox />
      Accept terms and conditions
    </Label>
  );
}
```

## Installation

<ComponentSource name="checkbox" title="components/ui/checkbox.tsx" />

## Usage

```tsx
import { Checkbox } from "@/components/ui/checkbox";
```

```tsx
<Checkbox />
```

## Examples

### Sizes

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Label className="flex items-center gap-2 text-xs">
        <Checkbox size="xs" />
        Size xs
      </Label>
      <Label className="flex items-center gap-2">
        <Checkbox size="sm" />
        Size sm
      </Label>
      <Label className="flex items-center gap-2">
        <Checkbox size="default" />
        Size md
      </Label>
      <Label className="flex items-center gap-2 text-base">
        <Checkbox size="lg" />
        Size lg
      </Label>
      <Label className="flex items-center gap-2 text-base">
        <Checkbox size="xl" />
        Size xl
      </Label>
    </div>
  );
}
```

### Disabled

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox disabled />
      Accept terms and conditions
    </Label>
  );
}
```

### Indeterminate

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  return (
    <Label>
      <Checkbox indeterminate />
      Indeterminate
    </Label>
  );
}
```

### Controlled

```tsx
"use client";

import { useState } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex flex-col gap-3">
      <Label>
        <Checkbox checked={checked} onCheckedChange={setChecked} />
        Accept terms and conditions
      </Label>
      <p>Checked: {checked.toString()}</p>
    </div>
  );
}
```

### With description

```tsx
import { useId } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  const id = useId();
  return (
    <div className="flex items-start gap-2">
      <Checkbox defaultChecked id={id} />
      <div className="flex flex-col gap-1">
        <Label htmlFor={id}>Accept terms and conditions</Label>
        <p className="text-muted-foreground text-xs">
          By clicking this checkbox, you agree to the terms and conditions.
        </p>
      </div>
    </div>
  );
}
```

### Card style

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function CheckboxDemo() {
  return (
    <Label className="flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/50 has-data-checked:bg-accent/50">
      <Checkbox defaultChecked />
      <div className="flex flex-col gap-1">
        <p>Enable notifications</p>
        <p className="text-muted-foreground text-xs">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </Label>
  );
}
```

## API Reference

### Checkbox props

<ApiReferenceAccordion
  type={{
    size: {
      description: "The size of the checkbox.",
      type: "'xs' | 'sm' | 'default' | 'lg' | 'xl'",
      default: `'default'`,
    },
  }}
/>