ElyriRadio
A radio group: same-name native radios provide arrow key cycling while RadioGroup owns the value.
Installation
Add component
pnpm dlx @elyri/cli@latest add radioExamples
Basic
Set the initial choice with defaultValue, then click to switch.
import { RadioGroup } from './components/elyri/Radio';
export function Example() {
return (
<RadioGroup defaultValue="apple">
<RadioGroup.Radio value="apple">Apple</RadioGroup.Radio>
<RadioGroup.Radio value="banana">Banana</RadioGroup.Radio>
<RadioGroup.Radio value="cherry">Cherry</RadioGroup.Radio>
</RadioGroup>
);
}Controlled
Driven by value and onValueChange.
import { useState } from 'react';
import { RadioGroup } from './components/elyri/Radio';
export function Example() {
const [value, setValue] = useState('apple');
return (
<RadioGroup value={value} onValueChange={setValue}>
<RadioGroup.Radio value="apple">Apple</RadioGroup.Radio>
<RadioGroup.Radio value="banana">Banana</RadioGroup.Radio>
</RadioGroup>
);
}Vertical layout
Pass orientation="vertical" to stack the options; horizontal is the default.
import { RadioGroup } from './components/elyri/Radio';
export function Example() {
return (
<RadioGroup orientation="vertical" defaultValue="apple">
<RadioGroup.Radio value="apple">Apple</RadioGroup.Radio>
<RadioGroup.Radio value="banana">Banana</RadioGroup.Radio>
<RadioGroup.Radio value="cherry">Cherry</RadioGroup.Radio>
</RadioGroup>
);
}Disabled
Group level disabling applies to every radio.
import { RadioGroup } from './components/elyri/Radio';
export function Example() {
return (
<RadioGroup disabled defaultValue="apple">
<RadioGroup.Radio value="apple">Apple</RadioGroup.Radio>
<RadioGroup.Radio value="banana">Banana</RadioGroup.Radio>
</RadioGroup>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled value; omit it to run uncontrolled |
defaultValue | string | — | Initial value when uncontrolled |
onValueChange | (value: string) => void | — | Called whenever the selection changes |
name | string | — | Native name attribute, auto-generated when omitted (arrow keys rely on it) |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction, horizontal by default |
disabled | boolean | false | Disable the whole group |
Radio.value | string | — | The option value (Radio) |
Radio.children | ReactNode | — | Label text rendered to the right of the dot (Radio) |