# Checkbox

> Atom — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add checkbox
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { Checkbox } from 'orn-ui/checkbox';
```

Depends on: core (theme + icons)

## Variants

### Interactive

```tsx
<Checkbox value={checked} onValueChange={setChecked} label="Accept terms" />
```

### Checked

```tsx
<Checkbox value={true} onValueChange={() => {}} label="Subscribed to updates" />
```

### Disabled

```tsx
<Checkbox value={true} onValueChange={() => {}} label="Always checked" disabled />
```

### Custom color

```tsx
<Checkbox value={true} onValueChange={() => {}} label="Custom color" color="#00cae1" />
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  { label: 'Interactive', content: <Checkbox value={checked} onValueChange={setChecked} label="Accept terms" /> },
  { label: 'Checked', content: <Checkbox value={true} onValueChange={() => {}} label="Subscribed to updates" /> },
  { label: 'Disabled', content: <Checkbox value={true} onValueChange={() => {}} label="Always checked" disabled /> },
  { label: 'Custom color', content: <Checkbox value={true} onValueChange={() => {}} label="Custom color" color="#00cae1" /> },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `value` | `boolean` | — | — |
| `onValueChange` | `(value: boolean) => void` | — | — |
| `label?` | `string` | — | — |
| `color?` | `string` | — | — |
| `disabled?` | `boolean` | — | — |