Radio

Interactive

See Radio in Storybook for every variant, with live controls.

One choice from a small set of mutually exclusive options. Above about five options, use Select.

import { Radio } from "@kairosis/eidos";

{
  options.map((option) => (
    <Radio
      key={option.value}
      name="trigger"
      value={option.value}
      label={option.label}
      checked={value === option.value}
      onChange={setValue}
    />
  ));
}

Props

Prop	Type	Default	Description
checked	boolean	—	Required. Controlled
onChange	(value: string) => void	—	Receives this radio's value
label	ReactNode	—
name	string	—	Groups radios together
value	string	—	This option's value
disabled	boolean	false

Forwards a ref to the underlying <input type="radio">.

Guidelines

• Give every radio in a group the same name — that's what makes arrow keys move between them.
• onChange receives the radio's value, so a group needs no per-option handler.
• Radio is a single option, not the group: render one per choice and hold the selected value yourself.