RadioCardGroup

Single-choice card selector for plans, roles, or layouts, with a fixed-column grid.

RadioCardGroup is a thin preset over RadioGroup locked to the card variant, rendering each option as a selectable tile. Reach for it when the choices benefit from more room — plans, roles, layouts, or preferences with a label, description, and optional icon. Pass columns (1–4) to lay the cards out as a responsive fixed grid instead of wrapping rows.

Example

Preview

StarterUp to 3 seatsGrowthUp to 25 seatsScaleUnlimited seats

import { RadioCardGroup } from '@officina/ui';
import { useState } from 'react';

function RolePicker() {
  const [role, setRole] = useState('editor');
  return (
    <RadioCardGroup
      value={role}
      onChange={setRole}
      columns={2}
      options={[
        { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
        { value: 'editor', label: 'Editor', description: 'Can edit content' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: T) => void	—	Called with the newly selected value.
options*	RadioOption<T>[]	—	Radio options to choose from.
value*	T	—	Currently selected value.
columns	enum	—	Lay cards out as a fixed-column grid instead of wrapping rows.
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
name	string	—
orientation	enum	—	Layout direction of the options.
required	boolean	—	Marks the field as required for validation styling and `aria-required`.

Example

API

On this page