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