# Checkbox

Checkbox whose fill appears as the check draws on, with a gentle haptic tick. Supports an indeterminate dash, can strike through a task’s label when ticked, and clearing fades the check out.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add checkbox
```

## Import

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

## Variants

- `list` — List: `npx @lumioui/cli add checkbox-list`
- `states` — States: `npx @lumioui/cli add checkbox-states`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `checked` | `boolean` | — |
| `onCheckedChange` | `(checked: boolean) => void` | — |
| `indeterminate?` | `boolean` | Renders a dash instead of a check (partial selection). Implies the filled state. |
| `label?` | `string` | Text label rendered beside the box — tapping it toggles too, and the  box announces it via accessibilityLabelledBy/aria-labelledby. |
| `icon?` | `IconName` | Leading icon rendered between the box and the label. |
| `subtitle?` | `string` | Secondary text under the label. |
| `leading?` | `React.ReactNode` | Custom leading node between the box and the label (brand mark, colour  tile, avatar). Wins over `icon`. |
| `trailing?` | `React.ReactNode` | Trailing node pinned to the row's right edge (price, count, badge).  Only rendered with `label`. |
| `strikeWhenChecked?` | `boolean` | Strike the label through and mute it while checked — task-list idiom. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/checkbox