Radio

Radio group for mutually exclusive selection. Built on Radix UI RadioGroup.

Import

import { RadioGroup } from '@kikumi3n/ui';

Usage

<RadioGroup
  label="Plan"
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise' },
  ]}
/>

Controlled

const [plan, setPlan] = useState('free');

<RadioGroup
  label="Plan"
  value={plan}
  onChange={setPlan}
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
  ]}
/>

API

RadioGroup

Prop	Type	Default	Description
label	string	—	Group label
options	RadioOption[]	required	Radio options
value	string	—	Controlled value
defaultValue	string	—	Uncontrolled initial value
onChange	(value: string) => void	—	Change handler
disabled	boolean	false	Disable all options

RadioOption

Prop	Type	Description
value	string	Option value
label	string	Option label
disabled	boolean	Disable this option

Accessibility

Built on Radix UI RadioGroup:

• Arrow keys navigate between options
• Space selects the focused option
• Proper role="radiogroup" and role="radio"