> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

> Binary checkbox input.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/checkbox-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=346f8045e99ebc986a11ec33bac123c9" alt="Checkbox component preview (light)" width="240" data-path="images/ui/checkbox-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/checkbox.tsx`

## When to use

* Boolean fields where submission is explicit (terms, filters).
* For immediate on/off actions consider a Switch.

## Usage

```tsx sabo/src/components/ui/checkbox.tsx theme={null}
import { Checkbox } from "@/components/ui/checkbox";

export function Example() {
  return (
    <label className="flex items-center gap-2">
      <Checkbox aria-label="Accept" />
      <span>I agree to the terms</span>
    </label>
  );
}
```

## Key props

<ParamField path="defaultChecked" type="boolean">
  Initial checked state. Use <code>checked</code> for controlled forms.
</ParamField>

<ParamField path="className" type="string">
  Override size or colors (e.g., <code>size-5</code>, <code>text-primary</code>).
</ParamField>

<Note>
  This component forwards all props from Radix Checkbox primitives (Root/Indicator). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox)
</Note>

## Styling tip

* Change checkmark size by targeting <code>\[data-slot=checkbox-indicator] svg</code>.
* Keep small hit targets paired with a label to increase click area.

## Accessibility

* Always include a visible label adjacent to the control.