Build · New

Radio Card

A list row chosen with a radio in a group, with an icon at the start, a headline, supporting text and trailing text such as a price. 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/radio-card

Usage

import { RadioGroup } from "@/components/ui/radio";
import { RadioCard } from "@/components/ui/radio-card";

<RadioGroup label="Plan" defaultValue="plus">
  <RadioCard value="basic" leading={UserIcon} trailingText="Free">Basic</RadioCard>
  <RadioCard value="plus" leading={StarIcon} trailingText="29 / month">Plus</RadioCard>
</RadioGroup>

Examples

Circle at the start

leading="radio" puts the circle at the start of the row.

API reference

RadioCard

Prop	Type	Description
`value`	`string`	The option's value in its group.
`children`	`ReactNode`	Figma's Headline.
`overline / description / trailingText`	`ReactNode`	Figma's Overline, Supporting text and Trailing text.
`leading`	`IconComponent \| ReactNode \| "radio"`	Figma's Leading type.
`disabled`	`boolean`	State = Disabled.

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
`ArrowDownArrowUp`	Between cards, selecting; Tab leaves the group.

ARIA

Each row's circle is role="radio", named by the headline and linked to the supporting text.

Arabic and RTL notes

Mirrors

The icon sits at the start (the right), the circle at the end (the left).

Does not mirror

Non-directional icons don't mirror.

Numerals: Prices in the trailing text follow numerals through formatNumber.
Arabic typography: The headline is body-16 Medium.

All components ›