Radio Card

Pick exactly one option from a short list; plain or card-style radios.

Import

import { Radio, RadioGroup } from '@marbleui/ui'

This is a style of radio-group; see its examples for all variants.

Props

<Radio>

Prop	Type	Default	Description
description	`ReactNode`	`—`
variant	`'default' \| 'card'`	`'default'`

Also accepts React Aria props (97).

<RadioGroup>

Prop	Type	Default
children	`ReactNode`	`—`
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`

Also accepts React Aria props (95).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Radio · React Aria RadioGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

RadioGroup with variant="card" on each Radio: bordered cards for a single choice that needs a detail line, such as a plan or a shipping speed.

<RadioGroup label="Plan" defaultValue="team" orientation="horizontal">
  <Radio variant="card" value="starter" description="$0 / month">Starter</Radio>
  <Radio variant="card" value="team" description="$12 per seat / month">Team</Radio>
  <Radio variant="card" value="business" description="$24 per seat / month">Business</Radio>
</RadioGroup>

In a horizontal group the cards share the row equally and don’t wrap; keep to two to four, or switch to orientation="vertical" on narrow screens.
Each card is the radio’s label: a click anywhere selects it, and the title and description are read together as its name. Keep descriptions short and put nothing interactive inside.
The selected card gets an accent border and tint, and its circle becomes a thick ring, so state isn’t colour alone.

Example source · show

import { Radio, RadioGroup } from './radio-group'

export const styles = {
  Default: () => (
    <RadioGroup label="Visibility" defaultValue="team">
      <Radio value="private">Private</Radio>
      <Radio value="team" description="Everyone in Acme can view.">Team</Radio>
      <Radio value="public">Public</Radio>
    </RadioGroup>
  ),
  Card: () => (
    <RadioGroup label="Plan" defaultValue="pro" orientation="horizontal" className="w-[28rem]">
      <Radio variant="card" value="starter" description="$0 / month">Starter</Radio>
      <Radio variant="card" value="pro" description="$12 / seat">Pro</Radio>
      <Radio variant="card" value="team" description="$24 / seat">Team</Radio>
    </RadioGroup>
  ),
}

Source: packages/ui/src/radio-group/radio-group.tsx

Catalog

Category: selection
Priority: Core
Primitive: composed
React Aria: RadioGroup
Base UI: Radio Group