Checkbox — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add checkbox

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Checkbox } from 'orn-ui/checkbox';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Una decisión binaria que se sostiene sola: aceptar términos, recordar sesión, activar un filtro.
value / onValueChange — Siempre controlado — el estado vive en el padre.
label — Es tocable junto con la caja. Se omite solo cuando un texto cercano ya la nombra.
color — Override del acento en estado marcado; por defecto sigue el primary del theme.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Interactive

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

Checked

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

Disabled

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

Custom color

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

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

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