RadioCard

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Cards stack inside a RadioGroup. icon and meta are optional.

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>
  );
}

Horizontal

orientation="horizontal" lines the cards up in a row; each is at least 224 px and wraps on narrow screens.

Notification frequency

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

LightDark

Copy code

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

export default function Horizontal() {
  return (
    <Provider locale="en-GB">
      <RadioGroup label="Notification frequency" orientation="horizontal" defaultValue="instant">
        <RadioCard value="instant" title="Instant" description="A notification for every event." />
        <RadioCard value="daily" title="Daily digest" description="One email every morning." />
        <RadioCard value="weekly" title="Weekly digest" description="On Monday mornings." />
      </RadioGroup>
    </Provider>
  );
}

States

A group error turns every card border to the danger colour; one card can be disabled alone.

Notification frequency* required

InstantA notification for every event.Daily digestOne email every morning.

Choose a frequency.

Notification frequency

Daily digestOne email every morning.OffYour administrator turned this off.

LightDark

Copy code

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-md flex-col gap-xl">
        <RadioGroup label="Notification frequency" required error="Choose a frequency.">
          <RadioCard value="instant" title="Instant" description="A notification for every event." />
          <RadioCard value="daily" title="Daily digest" description="One email every morning." />
        </RadioGroup>
        <RadioGroup label="Notification frequency" defaultValue="daily">
          <RadioCard value="daily" title="Daily digest" description="One email every morning." />
          <RadioCard value="off" title="Off" description="Your administrator turned this off." disabled />
        </RadioGroup>
      </div>
    </Provider>
  );
}

Light and dark mode

The selected card takes the primary border and the selected surface.

Light

Notification frequency

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

Dark

Notification frequency

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

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>
  );
}