Checkbox

Stable
WCAG 2.2 evidence
RTL

The bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree. Built on React Aria CheckboxField + CheckboxButton: a native <input type="checkbox"> stays in the DOM (visually hidden) so forms, autofill and form reset work; Tab focuses it, Space toggles it, and isIndeterminate is exposed as "mixed" (WCAG 2.1.1, 4.1.2). Checked and indeterminate are shown by a check mark and a dash, not by colour alone (1.4.1); keyboard focus draws the ring on the box (2.4.7); the pointer target is 24 x 24 px (2.5.8). Inside a React Aria Table, GridList or Tree, slot="selection" makes it the row selector. Use CheckboxField for a labelled option with helper text, CheckboxCard for a large option, CheckboxGroup to group options, and Switch for settings that apply immediately. Consumer duties: the label wording (positive statements, "Send me payslip emails") and the name of an unlabelled box.

import { Checkbox } from "@nexera-ui/react";

Loading example…

6
examples: 27
props: 6
live controls: 1
platform: 10
WCAG criteria: 3
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

Generated code

import { Checkbox } from "@nexera-ui/react";

<Checkbox />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

Values

Figma Value: Unchecked, Checked (isSelected/defaultSelected) and Indeterminate (isIndeterminate).

Loading example…

app.tsx

import { Checkbox } from "@nexera-ui/react";

export function Values() {
  return (
    <div className="flex items-center gap-6">
      <Checkbox aria-label="Unchecked" />
      <Checkbox aria-label="Checked" defaultSelected />
      <Checkbox aria-label="Indeterminate" isIndeterminate />
    </div>
  );
}

Disabled and invalid

Figma State=Disabled (isDisabled) and State=Error (isInvalid) for every value; hover and focus by interaction.

Loading example…

app.tsx

import { Checkbox } from "@nexera-ui/react";

export function DisabledAndInvalid() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-6">
        <Checkbox aria-label="Disabled" isDisabled />
        <Checkbox aria-label="Disabled checked" isDisabled defaultSelected />
        <Checkbox aria-label="Disabled indeterminate" isDisabled isIndeterminate />
      </div>
      <div className="flex items-center gap-6">
        <Checkbox aria-label="Invalid" isInvalid />
        <Checkbox aria-label="Invalid checked" isInvalid defaultSelected />
        <Checkbox aria-label="Invalid indeterminate" isInvalid isIndeterminate />
      </div>
    </div>
  );
}

With label

With a visible label (children): the whole row is the target and the label wraps. Use CheckboxField for helper text.

Loading example…

app.tsx

import { Checkbox } from "@nexera-ui/react";

export function WithLabel() {
  return (
    <div className="flex max-w-xs flex-col gap-3">
      <Checkbox defaultSelected>Send me payslip emails</Checkbox>
      <Checkbox>
        Send me an email whenever someone on my team requests leave, including half days
      </Checkbox>
    </div>
  );
}

Group

CheckboxGroup: a named group with helper text, a required asterisk and a group error. Its label, helper and error follow the Figma Radio group.

Loading example…

app.tsx

import { Checkbox, CheckboxGroup } from "@nexera-ui/react";

export function Group() {
  return (
    <CheckboxGroup
      label="Notify me about"
      description="Sent to your work email."
      isRequired
      defaultValue={["leave"]}
      name="notify"
    >
      <Checkbox value="leave">Leave requests</Checkbox>
      <Checkbox value="payslips">Payslips</Checkbox>
      <Checkbox value="reviews">Performance reviews</Checkbox>
    </CheckboxGroup>
  );
}

Right to left

Right-to-left: the box moves to the start (right) of the label.

Loading example…

app.tsx

import { Checkbox, CheckboxGroup } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <CheckboxGroup label="أرسل لي إشعارات عن" defaultValue={["leave"]}>
      <Checkbox value="leave">طلبات الإجازة</Checkbox>
      <Checkbox value="payslips">قسائم الرواتب، بما في ذلك المكافآت والبدلات الشهرية</Checkbox>
    </CheckboxGroup>
  );
}

Props 27

Press "Try it" on a card to load that prop into the playground.

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

childrenNexera

VisibleContent

Visible label after the box (Component/Label). It is the accessible name, wraps and is never truncated. For a label with helper text use CheckboxField. No visible label.

aria-labelNexera

string

Overrides the name given by children. Avoid: the name must contain the visible text (WCAG 2.5.3). Accessible name, for example "Select Ayesha Khan". Translate it. Accessible name; aria-labelledby wins when both are set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the checkbox instead of children. Id(s) of element(s) that name the checkbox; wins over aria-label. Id(s) of visible element(s) that name the checkbox.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

isIndeterminateReact Aria

boolean

Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.

valueReact Aria

string

The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).

defaultSelectedReact Aria

boolean

Whether the element should be selected (uncontrolled).

isSelectedReact Aria

boolean

Whether the element should be selected (controlled).

onChangeReact Aria

(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: boolean) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

inputRefReact Aria

Ref<HTMLInputElement | null>

A ref for the HTML input element.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-invalid
data-readonly
data-selected

Usage

<Checkbox className="data-disabled:opacity-90 shadow-sm" />

Theme studio

Checkbox

Try every prop. Copy the code.

Examples 5

Values

Disabled and invalid

With label

Group

Right to left

Props 27

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components