- Home
- Components
- Checkbox

# Checkbox

A control that allows the user to toggle between checked and not checked.

## Props


Prop	Type	Default	Description
checkall	boolean	false	Renders a square fill style for "select all" semantics
...Radix props	ComponentProps<typeof CheckboxPrimitive.Root>	-	All Radix checkbox props

## Types

```
interface CheckboxProps extends ComponentProps<typeof CheckboxPrimitive.Root> {
  checkall?: boolean;
  className?: string;
}
```

## Usage

```
<div className="flex flex-col gap-6">
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox" />
    <label htmlFor="Checkbox">Checkbox</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox disabled" disabled />
    <label htmlFor="Checkbox disabled">Checkbox disabled</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Checkbox disabled checked" disabled defaultChecked />
    <label htmlFor="Checkbox disabled checked">Checkbox disabled checked</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="checkall" checkall />
    <label htmlFor="checkall">Check all</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Check all disabled" checkall disabled />
    <label htmlFor="Check all disabled">Check all disabled</label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="Check all disabled checked" defaultChecked disabled checkall />
    <label htmlFor="Check all disabled checked">Check all disabled checked</label>
  </div>
</div>
```

### Examples

```
<Checkbox id="opt-in" />
<Checkbox id="select-all" checkall />
```