RadioCard

When to use

RadioCard is for places where options need explaining and the choice matters: a plan, a delivery method, a notification frequency.

When not to use

• For short options: for one-word options a Radio is enough and takes less room.
• For several choices: use CheckboxGroup.
• For an action: if the card leads to a page, use a linked Card.

Anatomy

Notification frequency

InstantA notification for every event.Daily digestOne email every morning.RecommendedWeekly digestOn Monday mornings.

LightDark

Copy code

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <RadioGroup label="Notification frequency" defaultValue="daily" className="max-w-md">
        <RadioCard value="instant" icon="bell" title="Instant" description="A notification for every event." />
        <RadioCard value="daily" icon="mail" title="Daily digest" description="One email every morning." meta="Recommended" />
        <RadioCard value="weekly" icon="sun" title="Weekly digest" description="On Monday mornings." />
      </RadioGroup>
    </Provider>
  );
}

1. Icon: Optional; decoration, not read.
2. Title: The radio’s name.
3. Description: Under the title; read as the description.
4. Meta: Short text at the end, such as a duration or “Recommended”.
5. Radio circle: Shows the selection.

Behaviour

• Clicking anywhere on the card selects it.
• Selection works as in the group: arrows move between cards and select.
• The group error and disabled state reach every card.

Guidelines

• Keep titles short and distinct; put detail in the description.
• Use the same structure on every card: if one has an icon, all do.
• Mark the recommended option with meta and select it by default.

Content

Turkish	English
Önerilen	Recommended

Related components

• RadioGroup: The group around the cards, and short options.
• Card: A linked or plain content card.