Checkbox

A box that is either ticked or not, with the label that says what it means.

<Checkbox>
  <Checkbox.Indicator />
  <Checkbox.Label />
</Checkbox>

• Checkbox — the root, and it is the row, not the box. It is the pressable: it owns the selected state, resolves the recipe once (R5) and publishes it to its slots.
• Checkbox.Indicator — the box, and the mark inside it. With no children it draws its own check.
• Checkbox.Label — what ticking the box means.

The root is the row so that tapping the label toggles the checkbox. That is the whole reason the label is a slot here rather than a Text you put beside the component and wire up yourself — and it is why PressableProps are on the root.

R3 — and the box comes with the auto-wrap. A stringifiable tree becomes the label and the root supplies the indicator, because a checkbox without one is not a checkbox:

<Checkbox>J'accepte</Checkbox>
// is exactly
<Checkbox>
  <Checkbox.Indicator />
  <Checkbox.Label>J'accepte</Checkbox.Label>
</Checkbox>

Written with no children at all, it is the box alone — the form you want inside a table row, where the label is a cell of its own. Anything else and the arrangement is yours.

No slot carries a margin (R4). What separates the box from its label is the root's gap, so JSX order is screen order — a label before the box is a matter of where you wrote it.

Controlled, or not

<Checkbox isSelected={accepted} onSelectedChange={setAccepted}>
  J'accepte les conditions
</Checkbox>

<Checkbox defaultSelected onSelectedChange={save}>
  Recevoir la lettre d'information
</Checkbox>

isSelected present means the caller owns the value; defaultSelected means the checkbox keeps it. onSelectedChange fires either way, and so does onPress — the tick and your handler both happen, in that order.

Invalid

<Checkbox isInvalid={!accepted} isSelected={accepted} onSelectedChange={setAccepted}>
  Il faut accepter pour continuer
</Checkbox>

The border, the mark's fill and the label turn danger, and the resting fill is dropped: a box that is wrong reads as an outline rather than as a filled control that happens to be red at the edge. The reference implementation reaches the same shape with a compound.

It does not mount a message. Put one under the row yourself — a slot that silently renders nothing is a slot you cannot debug, which is the TextField.Error bargain again.

Indeterminate

<Checkbox isIndeterminate={some && !all} isSelected={all} onSelectedChange={setAll}>
  Tout sélectionner
</Checkbox>

Neither ticked nor empty — the state a "select all" sits in while some of its rows are. The box fills as if selected and the mark is a dash, a screen reader hears mixed, and a press resolves it to selected rather than toggling into it: "some of these" is a state a control reports, never one a person picks.

It is a display state and does not touch isSelected — the caller decides when the tri-state collapses, because only the caller knows what the rows say.

Disabled

<Checkbox isDisabled defaultSelected>
  Verrouillé
</Checkbox>

On the row, not the box: what is disabled is the control, and the label is part of it. R8 keeps disabled off the public surface.

A label that wraps

<Checkbox alignItems="flex-start" maxWidth={320}>
  <Checkbox.Indicator />
  <Checkbox.Label>J'accepte que ces informations soient conservées…</Checkbox.Label>
</Checkbox>

The box centres on the row, which is right for one line and wrong for a paragraph. A style prop moves it (R14) — no second API for it.

A mark of your own

<Checkbox.Indicator>
  <Icon as={CheckIcon} size={14} color={theme.colors.accentForeground} />
</Checkbox.Indicator>

Children replace the built-in check and ride the same fade. The built-in one exists so a checkbox works in a project that has installed no icon set — @xaui/icons was deleted in P0 — not to stop you having your own.

As another element

<Checkbox asChild isSelected={on} onSelectedChange={setOn}>
  <Animated.View layout={LinearTransition}>…</Animated.View>
</Checkbox>

R12 — the caller's element is the row, so it takes the children it was written with and the auto-wrap does not apply.

Sizes

size drives the box, the glyph, the gap and the label's type — never width. A checkbox hugs its label; a row that has to fill its parent is a style prop away.

The check is derived from the box — half its width, a quarter its height — rather than tabulated, so it is one glyph at four sizes instead of four drawings of one.

md is the reference implementation's checkbox measured: a 24pt box with the field's 1pt border. The corner is md (9) where theirs is lg (8) — the same key is 12 on our radius base, and 12 on a 24pt box is a circle, which is the Radio.

Variants

Three of the TextField's four levels, meaning here what they mean there — this is the field* family again, on a box 24pt wide instead of a field 48pt tall.

ghost is absent, where the TextField has it: a field with no border is still a line of text you can see; a checkbox with no border and no fill is nothing at all.

A variant describes the box at rest. Ticked, all three are the accent — or color.

Colour

<Checkbox color="#7c3aed" defaultSelected>
  Teinté
</Checkbox>

A raw tint, never a token (R7), and on this component it is the colour the box checks in, with a mark derived to read against it.

That works because the selected fill is a role — bgSelected, with fgSelected for the mark — rather than a token named in an isSelected axis. The tint pass re-runs paint and the states, never the axes, so a fill written as an axis would have been the accent again the moment the box was ticked. Radio and Switch need the same pair, which is why it is in the engine rather than here.

The tint is ignored while isInvalid. An error outranks a brand colour, the same way it outranks focus on the TextField — and unlike the TextField, where a tint and an error currently fight over the border, this one is decided in the root and not left to resolution order.

• accessibilityRole="checkbox" on the root, overridable, with accessibilityState.checked following the value and .disabled following isDisabled. A caller's own accessibilityState is merged, not spread over: naming one key must not silently drop the two a screen reader reads this control by.
• aria-invalid follows isInvalid.
• The label is inside the control, so the checkbox announces itself with its text instead of as an unnamed box. A checkbox with no label needs an accessibilityLabel.
• The whole row is the touch target, which is what makes a 24pt box reachable; hitSlop is Pressable's and still available for the case where it is not.
• The built-in check mirrors under RTL, because borderStartWidth is a logical edge and R13 leaves no other kind. A check reads as a check either way.