Checkbox

A single yes/no, or one member of a set of them. Base UI's Checkbox with an acrylic tick on top of it.

import { Checkbox } from 'neba';

<Checkbox label="Remember me" defaultChecked />;

Props

Prop	Type	Default	Description
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
label	ReactNode	—	The label, wired to the control by Base UI's Field
description	ReactNode	—	Helper text
error	ReactNode	—	Error message. Its presence turns the control invalid and re-points the colour family at danger
invalid	boolean	!!error	Forces the invalid state without a message, for when a form library owns validity
checked	boolean	—	Whether it is ticked. Use with onCheckedChange for a controlled checkbox
defaultChecked	boolean	false	The initial state, for an uncontrolled checkbox
onCheckedChange	(checked: boolean, details) => void	—	Called when the checkbox is ticked or unticked
indeterminate	boolean	false	Neither ticked nor unticked — a parent whose children disagree
required	boolean	false	Must be ticked before the form submits
name	string	—	Identifies the field when a form is submitted
readOnly	boolean	false	Shown but not changeable. Keeps its colour and edge, drains the saturation
disabled	boolean	false	Unavailable. Drops the colour family for neutral grey

label, description and error are props rather than children, for the same reason they are on TextField: the arrangement is fixed, and what a caller wants to decide is what goes in each slot. children is not accepted at all — anything a checkbox has to say belongs in one of the three.

Examples

States

import { Checkbox } from 'neba';

export default function CheckboxStates() {
  return (
    <div className="flex flex-col gap-3">
      <Checkbox label="Unchecked" />
      <Checkbox label="Checked" defaultChecked />
      <Checkbox label="Read-only" readOnly defaultChecked />
      <Checkbox label="Disabled" disabled />
      <Checkbox label="Disabled and checked" disabled defaultChecked />
      <Checkbox label="I agree to the terms" error="You have to agree to continue." />
    </div>
  );
}

An error also turns the checkbox invalid, which re-points the whole colour family at danger — the tick, the focus ring and the message all turn over together.

Mixed

A parent whose children disagree is neither ticked nor unticked. indeterminate is a third appearance, not a third value: the checkbox is still either on or off underneath.

import { useState } from 'react';
import { Checkbox } from 'neba';

const SCOPES = ['Read', 'Write', 'Delete'];

export default function CheckboxIndeterminate() {
  const [checked, setChecked] = useState([true, false, false]);
  const all = checked.every(Boolean);
  const some = checked.some(Boolean);

  return (
    <div className="flex flex-col gap-3">
      <Checkbox
        label="All permissions"
        checked={all}
        indeterminate={some && !all}
        onCheckedChange={(next) => setChecked(checked.map(() => next))}
      />
      <div className="ms-6 flex flex-col gap-3">
        {SCOPES.map((scope, index) => (
          <Checkbox
            key={scope}
            label={scope}
            checked={checked[index]}
            onCheckedChange={(next) =>
              setChecked(checked.map((value, i) => (i === index ? next : value)))
            }
          />
        ))}
      </div>
    </div>
  );
}

Sizes

import { Checkbox } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function CheckboxSizes() {
  return (
    <div className="flex flex-col gap-3">
      {SIZES.map((size) => (
        <Checkbox key={size} size={size} label={size} defaultChecked />
      ))}
    </div>
  );
}

Why the tick is not round

The corner radius on a checkbox is ~30% of its box, not the ~45% the control ladder uses. --neba-radius-md is 14px, which on an 18px box is a circle — and a checkbox that is round is a radio button. The intent is the same as everywhere else in the library: a sheet with the corners cut off, never a pill.

Accessibility

• Renders a real role="checkbox" with a hidden <input> beside it, so it submits with a form.
• The label is wired to the control by Base UI's Field: clicking the text toggles the box.
• Without a label, give it an aria-label.
• indeterminate reports aria-checked="mixed".