Components

RadioCard

A large choice with a title, description and icon, used inside a RadioGroup; the whole card is clickable.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { RadioCard } from '@bigbang/ui';
Source: RadioCard.tsx
Storybook: RadioCard · Playground

RadioCard is in the @bigbang/ui package.

import { RadioCard, RadioGroup } from '@bigbang/ui';

<RadioGroup label="Delivery method" name="delivery" value={value} onValueChange={setValue}>
  <RadioCard value="standard" title="Standard" description="3–5 working days" />
  <RadioCard value="express" title="Express" description="Next day" meta="Recommended" />
</RadioGroup>;

Props

valueRequired

Description: Value of the card; the RadioGroup reports it when the card is selected.
Type: string

titleRequired

Description: The card's heading; it names the radio.
Type: ReactNode

description

Description: Supporting text under the title, linked with aria-describedby.
Type: ReactNode

icon

Description: A decorative icon before the title.
Type: IconName

meta

Description: Short text at the end of the card, such as a duration or a count. Read as part of the description.
Type: ReactNode

disabled

Description: Turns off this card only; the others stay selectable.
Type: boolean
Default: false

className

Description: For layout only: margins and placement.
Type: string

See RadioGroup for the group props (label, value, error, orientation, name).

Data attributes

data-component="radio-card": on the card.
data-part: icon, title, description, meta, circle, indicator.
Base UI adds data-checked and data-disabled on the circle; the card follows them with has-*.