CheckboxField

Stable
WCAG 2.2 evidence
RTL

A checkbox with a label and optional helper text: the box (the same element as Checkbox) followed by the label and description, applied on submit. The whole row, description included, is one <label>, so a click or tap anywhere on it toggles the box (WCAG 2.5.8); Tab focuses the native input and Space toggles it (2.1.1). The label alone is the accessible name and the description and error are linked with aria-describedby (1.3.1, 4.1.2); checked and indeterminate are shown by a check mark and a dash (1.4.1); errors are text with an icon (3.3.1). Keyboard focus draws a ring around the row and the box. Consumer duties: label wording (positive statements, parallel grammar in a group) and error wording. Group related fields in a CheckboxGroup; use Switch for settings that apply immediately.

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

Loading example…

6
examples: 29
props: 7
live controls: 1
platform: 11
WCAG criteria: 8
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 { CheckboxField } from "@nexera-ui/react";

<CheckboxField />

Examples 5

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

Values

Figma Value: Unchecked, Checked and Indeterminate. Hover, press and Tab to the rows to see the other states.

Loading example…

app.tsx

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

export function Values() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxField label="Email notifications" description="Leave approvals and payslips" />
      <CheckboxField
        label="Email notifications"
        description="Leave approvals and payslips"
        defaultSelected
      />
      <CheckboxField
        label="Email notifications"
        description="Leave approvals and payslips"
        isIndeterminate
      />
    </div>
  );
}

Disabled and invalid

Figma State=Disabled (isDisabled) and State=Error (isInvalid with an errorMessage).

Loading example…

app.tsx

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

export function DisabledAndInvalid() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxField
        label="Email notifications"
        description="Leave approvals and payslips"
        isDisabled
      />
      <CheckboxField
        label="Email notifications"
        description="Leave approvals and payslips"
        isDisabled
        defaultSelected
      />
      <CheckboxField
        label="I accept the leave policy"
        description="Read it before you submit."
        isInvalid
        errorMessage="Accept the policy to continue."
      />
    </div>
  );
}

In group

Fields in a CheckboxGroup: the group names them and shows one error for all.

Loading example…

app.tsx

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

export function InGroup() {
  return (
    <CheckboxGroup label="Notify me about" description="Sent to your work email." isRequired>
      <CheckboxField value="leave" label="Leave requests" description="When someone applies" />
      <CheckboxField value="payslips" label="Payslips" description="On the last working day" />
    </CheckboxGroup>
  );
}

Long text

Labels and descriptions wrap under themselves; the box stays aligned with the first line.

Loading example…

app.tsx

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

export function LongText() {
  return (
    <CheckboxField
      label="Send me an email whenever someone on my team requests leave, including half days"
      description="Approvals, cancellations and changes to public holidays in every office you manage"
    />
  );
}

Right to left

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

Loading example…

app.tsx

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

<CheckboxField
  label="إشعارات البريد الإلكتروني"
  description="الموافقات على الإجازات وقسائم الرواتب"
/>;

Props 29

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

descriptionNexera

ReactNode

Helper text under the label. Linked with aria-describedby; turns status/danger/fg while invalid. Plain text: it sits inside the clickable row, so it must not contain links or buttons. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error under the row, with an icon. Shown while the field is invalid (isInvalid, validate, or native isRequired validation on submit); defaults to the validation message. Inside a CheckboxGroup the group shows the error instead. Write how to fix it.

classNameNexera

string

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

styleNexera

CSSProperties

Inline style of the root.

labelNexera

VisibleContent

Visible label. It is the accessible name (the description is not part of it), wraps and is never truncated. Write a positive statement ("Send me payslip emails"). No visible label.

aria-labelNexera

string

Overrides the name given by label. Avoid: the name must contain the visible text (WCAG 2.5.3). Accessible name. 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 label. 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 · 4 supporting

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.10ReflowLevel 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.3Label in NameLevel A · 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-focus-visible
data-invalid
data-readonly

Usage

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

Theme studio

CheckboxField

Try every prop. Copy the code.

Examples 5

Values

Disabled and invalid

In group

Long text

Right to left

Props 29

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components