Skip to content
Components

RadioCardGroup

Radio group whose options are full-size selectable cards (Base UI RadioGroup). Each RadioCard is itself the radio, so the group is one tab stop and the arrow keys move the selection between cards. Shares size/icon/indicatorSide/showIndicator with every RadioCard through context, so set them once here. Controlled via value/onValueChange, uncontrolled via defaultValue; layout picks a stacked grid or an inline wrap.

Usage

import { RadioCard, RadioCardContent, RadioCardDescription, RadioCardGroup, RadioCardGroupProps, RadioCardIcon, RadioCardProps, RadioCardTitle } from "@instruments/materia-ui/components/radio-card";

Best practices

  • Use RadioCardGroup for single-select cards and CheckboxCardGroup for multi-select - a radio group enforces exactly one choice.

  • Set size/icon/indicatorSide/showIndicator once on the group; each RadioCard reads them from context - don't repeat per item.

  • Drive selection with value/onValueChange (controlled) or defaultValue (uncontrolled); use layout="inline" for a wrapping row instead of the stacked grid.

  • Label the group (e.g. aria-label or a Field with a FieldLabel) - Tab lands on the selected card and the arrow keys move between cards.

Props

RadioCard

PropTypeDefaultDescription
disabledboolean

Whether this radio is disabled

iconLucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

Icon to display as indicator (overrides group-level icon)

suffixIconLucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

Icon to display at the end of the card

value(required)string

Value for this radio option (required for RadioGroup)

RadioCardGroup

PropTypeDefaultDescription
defaultValuestring | undefined

Uncontrolled initial selection.

onValueChange((value: string) => void) | undefined

Called with the newly selected value. Unlike Base UI's RadioGroup there is no eventDetails argument.

valuestring | undefined

Controlled selection.

iconLucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

Icon shown in place of the radio indicator on every item.

indicatorSide"end" | "start""start"

Which side the indicator/icon sits on.

layout"grid" | "inline""grid"

Stacked grid or inline-wrapping row of cards.

showIconOnlyWhenSelectedboolean

Only show icon when item is selected (for selection indicators like Check)

showIndicatorbooleantrue

Render the radio dot indicator.

size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl""base"

Card sizing shared with every item.

Also exports

  • componentRadioCardContent
  • componentRadioCardDescription
  • interfaceRadioCardGroupProps
  • componentRadioCardIcon
  • interfaceRadioCardProps
  • componentRadioCardTitle

Composition

Builds on

Center, Flex, InputCard, Radio

Used by

ProductSpecificationsSelector