Build · New
Checkbox Card
A list row chosen with a checkbox, with an icon or picture at the start, a headline and supporting text. The whole row is clickable.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/checkbox-cardUsage
import { CheckboxCard } from "@/components/ui/checkbox-card";<CheckboxCard leading={CreditCardIcon} description="Ending 4242" trailingText="SAR 2,450">Everyday card</CheckboxCard>Examples
Box at the start, disabled
leading="checkbox" puts the box at the start; disabled greys the whole row.
API reference
CheckboxCard
Also takes Checkbox's value and state props.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Figma's Headline. | |
overline / description / trailingText | ReactNode | Figma's Overline, Supporting text and Trailing text. | |
leading | IconComponent | ReactNode | "checkbox" | Figma's Leading type: an icon, a node (avatar or image), or checkbox to put the box at the start. |
Accessibility
Keyboard
Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.
| Key | Action |
|---|---|
| TabSpace | Tab to the box; Space toggles. |
ARIA
- The box is named by the headline and linked to the supporting text; the whole row is a
<label>. - Focus tints the row and shows the focus ring around the box.
Arabic and RTL notes
Mirrors
- The icon sits at the start (the right), the box at the end (the left).
Does not mirror
- Non-directional icons and the check don't mirror.
- Numerals
- Amounts in the trailing text follow
numeralsthroughformatNumber. - Arabic typography
- The headline is
body-16Medium; overline and supporting text are 12px.