---
title: Checkbox
description: A selection control for multiple independent options.
---
import Source from './_generated/checkbox.mdx';

A selection control for toggling one or more independent options, styled per platform — an MD3 rounded-square container on Android, a circular selection control on iOS.

<DemoFrame component="checkbox" />

## Installation

```bash
npx touchcn add checkbox
```

## Usage

<CodeGroup>

```html Angular
<tcn-checkbox [(checked)]="agreed">I agree</tcn-checkbox>
```

```tsx React
import { TcnCheckbox } from '@/components/ui/checkbox';

<TcnCheckbox checked={agreed} onCheckedChange={setAgreed}>
  I agree
</TcnCheckbox>
```

```vue Vue
<script setup lang="ts">
import { TcnCheckbox } from '@/components/ui/checkbox';
</script>

<template>
  <TcnCheckbox v-model="agreed">I agree</TcnCheckbox>
</template>
```

</CodeGroup>

The label is projected as children so the whole control is a single tap and focus target.

## Props

| Prop              | Type                                          | Default | Description                            |
| ----------------- | --------------------------------------------- | ------- | -------------------------------------- |
| `checked`         | `boolean \| 'indeterminate'`                  | `false` | Checked state (two-way bound).         |
| `onCheckedChange` | `(checked: boolean) => void`                  | —       | Change callback (React).               |
| `indeterminate`   | `boolean`                                      | `false` | Indeterminate state (Angular model).   |
| `disabled`        | `boolean`                                      | `false` | Disable the checkbox.                  |

On React, `TcnCheckbox` forwards Radix `Checkbox` props; pass `checked="indeterminate"` for the mixed state. On Angular the mixed state is a separate two-way `indeterminate` model.

<Source />