Checkbox

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

1. Import

Import the checkbox component from the design system.

import { Checkbox } from "@/design-system/components/ui/checkbox"

2. Props

Checkbox component props.

Prop	Type	Default
checked	boolean \| 'indeterminate'	false
defaultChecked	boolean	false
onCheckedChange	(checked: boolean \| 'indeterminate') => void	--
disabled	boolean	false
label	string \| React.ReactNode	--
required	boolean	false
error	string	--
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	sm
labelClassName	string	--
errorClassName	string	--
className	string	--

3. Sizes

Available sizes for the Checkbox component.

4. Usages

Common checkbox patterns and configurations.

Accept terms and conditions

import { Checkbox } from "@/design-system/components/ui/checkbox";

export function Example() {
  return (
    <Checkbox id="terms" label="Accept terms and conditions" />
  );
}