Checkbox

Installation

Checkbox ships with the library — install it once, then import:

import { Checkbox } from "@delacour/react-native-ui/checkbox";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";
import { View } from "react-native";

export default function Example() {
  const [accepted, setAccepted] = useState(false);

  return (
    <View className="flex-1 items-center justify-center p-4">
      <Checkbox isChecked={accepted} onCheckedChange={setAccepted}>
        <Checkbox.Label>Accept the terms</Checkbox.Label>
      </Checkbox>
    </View>
  );
}

Colours

color paints the ticked indicator — an unticked box is the same chrome at all six.

<Checkbox color="default" />
<Checkbox color="primary" />
<Checkbox color="success" />
<Checkbox color="warning" />
<Checkbox color="destructive" />
<Checkbox color="info" />

Sizes

The box reads --spacing-icon-* two steps above its own glyph: 18/14, 20/16, 24/18.

<Checkbox size="sm" />
<Checkbox size="md" />
<Checkbox size="lg" />

Indeterminate

isIndeterminate paints the surface, swaps the glyph and reports checked="mixed" — so a "select all" row says what it means rather than claiming a half-truth.

<Checkbox isIndeterminate isChecked={all} onCheckedChange={toggleAll}>
  <Checkbox.Label>Select all</Checkbox.Label>
</Checkbox>

Groups

Checkbox.Group's state is one array of the children's values.

<Checkbox.Group checked={selected} onChecked={setSelected}>
  <Checkbox value="email"><Checkbox.Label>Email</Checkbox.Label></Checkbox>
  <Checkbox value="push"><Checkbox.Label>Push</Checkbox.Label></Checkbox>
</Checkbox.Group>

The group carries shared defaults for the paint and state axes, which resolve own ?? group ?? field ?? default.

Inside a field

The box hands its toggle back up, so a form checkbox can be a bare <Checkbox /> with Field.Label naming it and the whole row driving it.

<Field orientation="horizontal">
  <Field.Label>Accept the terms</Field.Label>
  <Checkbox isChecked={accepted} onCheckedChange={setAccepted} />
</Field>

Use Field.Label in a horizontal Field, and Checkbox.Label everywhere else.

API Reference

Checkbox

A checkbox is a Pressable, so feedback, haptic and the rest are inherited — see Pressable. onPress is withheld in favour of onCheckedChange, and disabled in favour of isDisabled, which the label reads through context.

Checkbox.Group

Owns the selection for the boxes inside it, and publishes the shared axes so each one does not restate them. Extends ViewProps.

Checkbox.Label

The checkbox's text, wired as its accessible name. Extends React Native's TextProps.