Checkbox

At a glance

• Resolves the check icon through SemanticIconsProvider (key: checkmark).
• Forwards every Pressable prop, plus asChild for custom roots.

Preview

checked and defaultChecked

Controlled mode: pass checked and pair with onChange. Uncontrolled mode: pass defaultChecked and let the Checkbox track state itself. Mixing the two — passing both checked and defaultChecked — picks controlled and ignores defaultChecked (with a warning in dev).

// Controlled
const [done, setDone] = useState(false);
<Checkbox checked={done} onChange={setDone} label="Mark complete" />
 
// Uncontrolled
<Checkbox defaultChecked label="Send weekly digest" />

indeterminate

A controlled-only third state for "some but not all children checked". Render a parent Checkbox with indeterminate={true} when its children have a mixed selection, and let it flip back to checked / !checked when the user toggles the parent.

label

Renders a clickable label next to the box. Pressing the label toggles the Checkbox — same target as the box itself, with a wider hit area that's friendlier on touch.

<Checkbox label="I accept the terms" />

When you need richer label content (a link inside the label, an icon), pass children instead — the Checkbox treats the children as the label slot.

Inline label vs Field

The label prop is the inline label (right of the box) — the control's own affordance. Use it for stand-alone checkboxes:

import { Checkbox } from '@nori-ui/core';
 
export const Example = () => (
    <Checkbox label="I accept the terms" />
);

For grouped settings with description and error, wrap in <Field>:

import { Checkbox, Field } from '@nori-ui/core';
 
export const Example = () => (
    <Field label="Notifications" description="Choose how you'd like to be notified.">
        <Checkbox label="Send me email updates" />
    </Field>
);

See Field for the full API. For custom layouts, use the compound API.

disabled

Greys out the box and blocks onChange. Forwarded as aria-disabled so screen readers announce the state.

<Checkbox disabled label="Locked option" />

onChange

Fires with the next boolean checked value (or false when leaving indeterminate via toggle). Pair with checked for controlled, omit for uncontrolled — the Checkbox calls it either way so you can react to the user's input.

<Checkbox onChange={(next) => analytics.track('opt-in', { next })} />

asChild

Renders a supplied element as the interactive root. Useful when wrapping the entire row of label + helper text in a single press target.

<Checkbox asChild>
    <Pressable>
        <YourCustomRow />
    </Pressable>
</Checkbox>

Accessibility props

When wrapping Checkbox in <Field>, the following ARIA and accessibility attributes are injected onto the underlying Pressable automatically:

• id — matches the htmlFor of the label; generated by Field.
• aria-labelledby — references the Field.Label element's ID.
• aria-describedby — references Field.Description and/or Field.Error IDs when present.
• aria-invalid — set when the enclosing Field has a non-null error.
• aria-required — set when the enclosing Field has required={true}.

On native, the React Native counterparts are forwarded instead: accessibilityLabelledBy (mirrors aria-labelledby) and accessibilityDescribedBy (mirrors aria-describedby).

You can also pass any of these props explicitly when using Checkbox outside a Field, e.g., <Checkbox aria-label="Accept terms" />.

Native preview

Props