# Checkbox

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add checkbox
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { Checkbox } from 'orn-ui/checkbox';
```

Depende de: core (theme + icons)

## Variantes

### 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" />
```

## Código completo del demo

```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

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `value` | `boolean` | — | — |
| `onValueChange` | `(value: boolean) => void` | — | — |
| `label?` | `string` | — | — |
| `color?` | `string` | — | — |
| `disabled?` | `boolean` | — | — |