Radio Group

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

Import

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

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

Pick exactly one option from a short list that stays visible. For long lists use Select; for a compact switcher use SegmentedControl.

<RadioGroup label="Visibility" defaultValue="team">
  <Radio value="private">Private</Radio>
  <Radio value="team" description="Everyone in Acme can view.">Team</Radio>
</RadioGroup>

Uncontrolled: defaultValue. Controlled: value + onChange (the selected value string).
orientation is vertical or horizontal; arrow keys move the selection. variant="card" on each Radio gives bordered cards.
RadioGroup takes description and errorMessage; use isRequired for validation. Each Radio needs a value.
Without a visible label, pass aria-label.

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: Foundation
Primitive: react-aria
React Aria: RadioGroup
Base UI: Radio Group