Components / inputs

Radio Card

A card that is one option of a single-choice group: a plan, a shipping speed, a workspace type.

import { RadioCard } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { RadioCard } from '@basiiik/ui';

<RadioCard value="pro" label="Pro">Radio Card</RadioCard>

• Example values were filled in for the required props value, label: replace them with your own.
• Use inside RadioGroup, which owns the name, the selected value (Selected On or Off) and the group label. Hover and Focused are CSS; Disabled is the disabled attribute on the card or the group.
• Compose with: radio.
• Storybook: Inputs/Radio Card.

Props

States. Use inside RadioGroup, which owns the name, the selected value (Selected On or Off) and the group label. Hover and Focused are CSS; Disabled is the disabled attribute on the card or the group.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Choose one of 2 to 4 options that each need a description: a plan, a shipping speed, a workspace type
• A plan picker with a price and a few features per option

Do not use it when

• Short options with one-word labels (use Radio)
• More than one can be chosen (use Checkbox)
• The card opens a page or a detail view (use Card with interactive)
• More than 4 or 5 options (use Radio or Select)

Rules for agents

• Always render RadioCard inside RadioGroup, which provides the fieldset, the group label, the shared name and the selected value; RadioCard takes value (required), label (required), description, children and disabled
• Use RadioGroup orientation="horizontal" for a row of cards; they wrap on narrow screens on their own
• Put the price or a short feature list in children; it is read as part of the description
• No links, buttons or other controls inside a card: the whole card is one radio
• Keep the cards in a group parallel: same parts, same order, similar length
• Pass an error message to RadioGroup's error prop when a required choice is missing

Avoid

• A Card with interactive and a Radio inside it (two targets, and an interactive Card may hold only one link)
• A link such as "Compare plans" inside a card
• A single RadioCard on its own
• Hand-building a selectable card from a div, a border and a click handler

Writing the content

• Label: the option's name, one or two words: 'Pro'
• Description: who or what it is for, one line: 'For small teams'
• Details: the price with its unit, then up to three short features

Keyboard

• Arrow keys move and select between cards in the group
• Tab enters and leaves the group
• Space selects the focused card

Accessibility

• The radio is named by the label only (aria-labelledby), so a screen reader hears "Pro, radio button, 2 of 3" and then the description and details
• Description and details are the radio's description (aria-describedby)
• The group label comes from RadioGroup's legend

Colour tokens it reads

Related

• Radio
• Card
• Checkbox

inputs 8 Figma variants Try it in the live demo