RadioGroup

Single-choice radio selector driven by an options array, with plain or card layouts.

RadioGroup is a controlled single-choice input built from an options array, where each option carries a value, label, and optional description and icon. Use it whenever the user must pick exactly one value from a small, visible set. Lay options out with orientation ('vertical' or 'horizontal') and switch between 'plain' radios and selectable 'card' tiles via variant.

Example

Preview

StarterGrowthScale

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

function PlanPicker() {
  const [plan, setPlan] = useState('free');
  return (
    <RadioGroup
      value={plan}
      onChange={setPlan}
      orientation="horizontal"
      options={[
        { value: 'free', label: 'Free', description: 'For getting started' },
        { value: 'pro', label: 'Pro', description: 'For growing teams' },
      ]}
    />
  );
}

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.
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`.
variant	enum	—	Plain radios or selectable cards.

Example

API

On this page