CheckboxCard

Stable
WCAG 2.2 evidence
RTL

A large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits). The whole card is one <label> around a native checkbox, so a click or tap anywhere toggles it (WCAG 2.5.8); Tab focuses it and Space toggles it (2.1.1); the title is the accessible name and the description is linked with aria-describedby (1.3.1, 4.1.2). Checked shows a check mark in the box and a thicker brand border, not only a colour change (1.4.1); keyboard focus draws the ring around the card (2.4.7). Consumer duties: title and description wording; for simple lists use CheckboxField. Put related cards in a CheckboxGroup (which names them and shows one error).

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

Loading example…

5
examples: 28
props: 6
live controls: 1
platform: 12
WCAG criteria: 1
block uses 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 { CheckboxCard } from "@nexera-ui/react";

<CheckboxCard />

Examples 4

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

Values and disabled

Figma Value=Checked and State=Disabled; hover, press and Tab to the cards for the other states.

Loading example…

app.tsx

import { CheckboxCard } from "@nexera-ui/react";
import { LuMail } from "react-icons/lu";

export function ValuesAndDisabled() {
  return (
    <div className="flex flex-col gap-3">
      <CheckboxCard
        icon={<LuMail />}
        title="Email"
        description="Approvals, payslips and reminders"
        defaultSelected
      />
      <CheckboxCard
        icon={<LuMail />}
        title="Email"
        description="Approvals, payslips and reminders"
        isDisabled
      />
      <CheckboxCard
        icon={<LuMail />}
        title="Email"
        description="Approvals, payslips and reminders"
        isDisabled
        defaultSelected
      />
    </div>
  );
}

In group

Cards in a CheckboxGroup: one named group, one value per card, one error for all.

Loading example…

app.tsx

import { CheckboxCard, CheckboxGroup } from "@nexera-ui/react";
import { LuBell, LuMail, LuMessageSquare } from "react-icons/lu";

export function InGroup() {
  return (
    <CheckboxGroup
      label="Send reminders by"
      description="Choose one or more channels."
      defaultValue={["email"]}
      name="channels"
    >
      <CheckboxCard
        value="email"
        icon={<LuMail />}
        title="Email"
        description="Approvals and payslips"
      />
      <CheckboxCard
        value="chat"
        icon={<LuMessageSquare />}
        title="Chat"
        description="Direct messages"
      />
      <CheckboxCard value="push" icon={<LuBell />} title="Push" description="On your phone" />
    </CheckboxGroup>
  );
}

Long text

Titles and descriptions wrap; the card grows from its 80 px minimum height.

Loading example…

app.tsx

import { CheckboxCard } from "@nexera-ui/react";
import { LuMail } from "react-icons/lu";

<CheckboxCard
  icon={<LuMail />}
  title="Email, including the weekly digest of every approval"
  description="Approvals, payslips, reminders and public holiday changes in every office you manage"
/>;

Right to left

Right-to-left: icon tile at the start (right), box at the end (left).

Loading example…

app.tsx

import { CheckboxCard } from "@nexera-ui/react";
import { LuMail } from "react-icons/lu";

<CheckboxCard
  icon={<LuMail />}
  title="البريد الإلكتروني"
  description="الموافقات وقسائم الرواتب والتذكيرات"
/>;

Props 28

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

iconNexera

ReactNode

Icon in the 40 px tile before the text. Decorative. The tile is shown when an icon is provided.

descriptionNexera

ReactNode

Supporting text under the title. Linked with aria-describedby. Plain text: it sits inside the clickable card, so it must not contain links or buttons.

classNameNexera

string

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

styleNexera

CSSProperties

Inline style of the root.

titleNexera

VisibleContent

Visible title. It is the accessible name; wraps and is never truncated. No visible title.

aria-labelNexera

string

Overrides the name given by title. 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 card instead of title. Id(s) of element(s) that name the card; wins over aria-label. Id(s) of visible element(s) that name the card.

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.

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

8 direct · 4 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.11Non-text ContrastLevel 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-hovered
data-invalid
data-readonly
data-selected

Usage

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

Used in blocks

IntegrationsSettings and preferences

Theme studio

CheckboxCard

Try every prop. Copy the code.

Examples 4

Values and disabled

In group

Long text

Right to left

Props 28

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components