v0.5.14

RadioGroupCards

A set of radio cards that allow users to select a single option from a list with a card-like appearance

Installation

pnpm add @wandercom/design-system-web

Usage

18 lines
import { RadioGroupCards } from '@wandercom/design-system-web/ui/radio-group-cards';
import { useState } from 'react';

export default function RadioGroupCardsExample() {
  const [value, setValue] = useState("option-1")
  
	return (
		<RadioGroupCards
			value={value}
			onChange={setValue}
			items={[
				{ text: "Option 1", subText: "Subtext 1", value: "option-1" },
				{ text: "Option 2", subText: "Subtext 2", value: "option-2" },
				{ text: "Option 3", subText: "Subtext 3", value: "option-3" }
			]}
		/>
	)
}

Examples

Default

Radio group cards, built on top of the RadioGroup component.

Loading example...
9 lines
<RadioGroupCards
  value={value}
  onChange={setValue}
  items={[
    { text: "Option 1", subText: "Subtext 1", value: "option-1" },
    { text: "Option 2", subText: "Subtext 2", value: "option-2" },
    { text: "Option 3", subText: "Subtext 3", value: "option-3" }
  ]}
/>

Props

RadioGroupCardsProps

id?:

string
HTML id for the radio group.

name?:

string
Form name for the radio group.

value:

T extends string
The controlled selected value.

onChange:

(value: T) => void
Callback fired when the selected value changes.

items:

{ text: string; subText?: string; value: T }[]
Radio items with label text, optional subtext, and value.

className?:

string
Additional CSS classes to apply to the root element.

classNames?:

{ wrapper?, option?, selectedOption?, textContainer?, text?, subText?, radio? }
Granular CSS class overrides for internal elements.

Accessibility

RadioGroupCards is built on the native RadioGroup and RadioGroupItem primitives, which follow the WAI-ARIA radio group pattern.

Keyboard interaction:

  • Arrow Up / Arrow Left - Move focus to the previous option
  • Arrow Down / Arrow Right - Move focus to the next option
  • Space - Select the focused option
  • Tab - Move focus into/out of the radio group

Each card uses a <label> element with htmlFor linking to its radio input, ensuring screen readers announce the option text when focused.

RadioGroupCards