Radio

Terminal-style radio button group for single selection from multiple options.

Import

import { RadioGroup, Radio } from 'tuimorphic';

Basic Usage

Option AOption BOption C

<RadioGroup defaultValue="option1">
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
  <Radio value="option3" label="Option 3" />
</RadioGroup>

Props

RadioGroup Props

Prop	Type	Default	Description
`value`	`string`	—	Selected value (controlled)
`defaultValue`	`string`	—	Default selected value (uncontrolled)
`onValueChange`	`(value: string) => void`	—	Callback when value changes
`name`	`string`	—	Name attribute for forms
`disabled`	`boolean`	`false`	Whether the entire group is disabled
`children`*	`React.ReactNode`	—	Radio components
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLDivElement>`	—	Forwarded ref to the container

Radio Props

Prop	Type	Default	Description
`value`*	`string`	—	Value of this radio option
`label`	`string`	—	Label text displayed next to radio
`disabled`	`boolean`	`false`	Whether this option is disabled
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLButtonElement>`	—	Forwarded ref to the button

Horizontal Layout

SmallMediumLarge

<RadioGroup defaultValue="medium" className="flex gap-4">
  <Radio value="small" label="Small" />
  <Radio value="medium" label="Medium" />
  <Radio value="large" label="Large" />
</RadioGroup>

Disabled Options

Enabled optionDisabled optionAnother enabled

<RadioGroup defaultValue="enabled">
  <Radio value="enabled" label="Enabled option" />
  <Radio value="disabled" label="Disabled option" disabled />
  <Radio value="another" label="Another enabled" />
</RadioGroup>

Controlled RadioGroup

First optionSecond optionThird option

Selected: option1

const [value, setValue] = useState('medium');
 
<RadioGroup value={value} onValueChange={setValue}>
  <Radio value="small" label="Small" />
  <Radio value="medium" label="Medium" />
  <Radio value="large" label="Large" />
</RadioGroup>

Pricing Plans Example

const [plan, setPlan] = useState('pro');
 
const plans = [
  { value: 'free', label: 'Free', price: '$0/month' },
  { value: 'basic', label: 'Basic', price: '$9/month' },
  { value: 'pro', label: 'Pro', price: '$29/month' },
  { value: 'enterprise', label: 'Enterprise', price: '$99/month' },
];
 
<RadioGroup value={plan} onValueChange={setPlan}>
  {plans.map((p) => (
    <Radio key={p.value} value={p.value} label={`${p.label} - ${p.price}`} />
  ))}
</RadioGroup>

Visual Design

The radio uses a terminal-style indicator:

Unselected: ( )
Selected: (*)

Key	Action
`Arrow Down` / `Arrow Right`	Select next option
`Arrow Up` / `Arrow Left`	Select previous option
`Tab`	Move focus to/from radio group

Accessibility

Built on Base UI's accessible radio primitive
Proper ARIA attributes for screen readers
Keyboard navigable within group
Labels properly associated with radio buttons

Styling

Variable	Description
`--theme-border`	Radio border color
`--theme-text`	Indicator and label color
`--theme-focused-border`	Border color when focused

Checkbox - For multiple selections
Select - For longer option lists
Toggle - For on/off switches

Checkbox

Toggle