Checkbox

A checkbox with an animated tick, on its own or as a selectable card.

variant="card" turns the whole surface into the target, for pickable options where the box confirms a choice rather than being the only thing to press.

Use it for a form value the reader is setting. For picking several rows out of a list, use SelectionMode — its marker is round, which is the convention for choosing rather than filling in.

Installation

Checkbox ships with the library — no separate install.

import { Checkbox } from 'panelui-native';

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

npx panelui-cli@latest add checkbox

Usage

<Checkbox
  checked={accepted}
  onCheckedChange={setAccepted}
  label="Marketing & promotions"
  description="Special offers and exclusive deals"
/>

<Checkbox
  variant="card"
  checked={plan === 'pro'}
  onCheckedChange={() => setPlan('pro')}
  label="Pro"
  description="Advanced analytics and priority support."
/>

Examples

Controlled

checked is required — the checkbox holds no state of its own.

const [accepted, setAccepted] = useState(false);

<Checkbox
  checked={accepted}
  onCheckedChange={setAccepted}
  label="I accept the terms"
/>

With a description

The description sits under the label and stays part of the press target.

<Checkbox
  checked={marketing}
  onCheckedChange={setMarketing}
  label="Product updates"
  description="Occasional email about new releases. No more than once a month."
/>

Card variant

A bordered surface that fills its width — for a list of options where each is a real choice rather than a small toggle.

<View className="gap-2">
  {plans.map((plan) => (
    <Checkbox
      key={plan.id}
      variant="card"
      checked={selected.includes(plan.id)}
      onCheckedChange={() => toggle(plan.id)}
      label={plan.name}
      description={plan.summary}
    />
  ))}
</View>

A select-all row

The header is indeterminate when the selection is a partial one — some children on, some off — and pressing it turns them all on.

const all = selected.length === items.length;
const some = selected.length > 0 && !all;

<Checkbox
  checked={all}
  indeterminate={some}
  onCheckedChange={(next) => setSelected(next ? items.map((i) => i.id) : [])}
  label={all ? 'Deselect all' : 'Select all'}
/>

Variants

variant

• default (default)
• card

<Checkbox variant="default" checked={a} onCheckedChange={setA} label="Default" />

{/* A bordered surface that fills its width. */}
<Checkbox
  variant="card"
  checked={b}
  onCheckedChange={setB}
  label="Card"
  description="For options that are real choices, not small toggles."
/>

API Reference

Checkbox

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

With a description the row aligns the box to the label rather than centring it against the whole block. The card variant moves the box after the content so it sits top-right, and takes the primary border when checked.

The indeterminate state

indeterminate is the third state a parent box needs when it governs a group whose children are partly on. It fills like a checked box but draws a dash instead of a tick, and announces itself to a screen reader as mixed rather than a plain boolean. indeterminate overrides checked for what is drawn; pressing an indeterminate box resolves the group by turning it fully on, so the press reports true.

Public exports

Values: Checkbox

Types: CheckboxProps