Components · Form Controls
Checkbox Card
BetaSince v1.6.0
A checkbox drawn as a whole card: title, description and optional icon. Pick any number.
import { CheckboxCard } from '@nexub/react';Examples
Features
Lay checkbox cards out with any grid; there is no group component.
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | ReactNode | — | The card’s accessible name. |
| description | ReactNode | — | Secondary text, exposed as the accessible description. |
| icon | ReactNode | — | Leading icon. Turns primary when checked. |
| checked / defaultChecked | boolean | — | Controlled or initial state. No indeterminate state. |
| onCheckedChange | (checked: boolean) => void | — | Called with a plain boolean. |
| children | ReactNode | — | Extra content under the description. Keep it non-interactive. |
| disabled | boolean | false | Disables the card. |
Accessibility
ARIA roles
checkbox
Keyboard
- Tab
Moves focus to the card.
- Space
Toggles the card.
Screen reader
The title is the accessible name and the description is the accessible description.
Wrap related cards in a `fieldset` with a `legend` so the set has a name.
On iOS & Android
Web only
Checkbox Card has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.