ElyriRadio
单选组：同名原生 radio 承载箭头键循环切换，RadioGroup 管理取值，Radio 声明选项。
安装
添加组件
pnpm dlx @elyri/cli@latest add radio示例
基础用法
defaultValue 指定初始选中项，点击切换。
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>
);
}受控用法
value 与 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>
);
}纵向排列
orientation="vertical" 让选项纵向堆叠，默认横向。
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>
);
}禁用
组级禁用会作用于全部选项。
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>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | — | 受控选中值；不传则为非受控 |
defaultValue | string | — | 非受控初始值 |
onValueChange | (value: string) => void | — | 选中值变化回调 |
name | string | — | 原生 name 属性，未传时自动生成（箭头键导航依赖同名） |
orientation | 'horizontal' | 'vertical' | 'horizontal' | 排列方向，默认 horizontal |
disabled | boolean | false | 组级禁用 |
Radio.value | string | — | 该选项的值（Radio） |
Radio.children | ReactNode | — | 标签文案，渲染在圆点右侧（Radio） |