Checkbox — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add checkbox

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — A binary choice that stands on its own: accept terms, remember me, toggle a filter.
value / onValueChange — Always controlled — the parent owns the state.
label — Tappable along with the box. Skip it only when a nearby text already labels it.
color — Accent override for the checked state; by default it follows the theme primary.

Demo clip not recorded yet — see MEDIA.md

Variants

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

Full demo source

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

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

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