Radio 单选框

用于从一组选项中选择一项。

分组选项

通过 options 设置选项，label 为选项分组提供名称。

交互预览分组选项

选择项目外观

浅色深色跟随系统自定义（暂不可用）

basic.tsx

import { RadioGroup } from '@sudden3/leaf-ui';

export function RadioBasic() {
  return (
    <RadioGroup
      label="选择项目外观"
      name="appearance"
      defaultValue="light"
      options={[
        { label: '浅色', value: 'light' },
        { label: '深色', value: 'dark' },
        { label: '跟随系统', value: 'system' },
        { label: '自定义（暂不可用）', value: 'custom', disabled: true },
      ]}
    />
  );
}

受控与纵向排列

通过 value / onChange 管理选择结果，direction="vertical" 设置纵向排列。

交互预览受控与纵向排列

提醒频率

每天每周仅重要消息

当前选择：daily

controlled.tsx

import { RadioGroup } from '@sudden3/leaf-ui';
import { useState } from 'react';

export function RadioControlled() {
  const [value, setValue] = useState('daily');
  return (
    <div className="leaf-demo-stack">
      <RadioGroup
        label="提醒频率"
        direction="vertical"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        options={[
          { label: '每天', value: 'daily' },
          { label: '每周', value: 'weekly' },
          { label: '仅重要消息', value: 'important' },
        ]}
      />
      <span className="leaf-demo-note">当前选择：{value}</span>
    </div>
  );
}

RadioGroup API

属性	类型	默认值	说明
`options`	`readonly RadioOption[]`	必填	选项列表
`value` / `defaultValue`	`string`	—	受控值 / 非受控初始值
`onChange`	`ChangeEventHandler<HTMLInputElement>`	—	从 `event.target.value` 读取所选值
`name`	`string`	自动生成	同组的字段名；提交表单时建议指定
`label`	`string`	—	分组名称
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	排列方向
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	同组控件尺寸
`disabled` / `required`	`boolean`	`false`	禁用整组 / 要求选择一项
`ref`	`Ref<HTMLFieldSetElement>`	—	分组引用

Radio API

属性	类型	默认值	说明
`checked` / `defaultChecked`	`boolean`	—	受控选中状态 / 非受控初始状态
`value`	`string \| number \| readonly string[]`	—	当前选项的提交值
`name`	`string`	—	相同字段名的单选框构成一组
`onChange`	`ChangeEventHandler<HTMLInputElement>`	—	从 `event.target.value` 读取所选值
`disabled` / `required`	`boolean`	`false`	禁用选项 / 要求选择一项
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	单选框尺寸
`children`	`ReactNode`	—	可点击的选项标签
`ref`	`Ref<HTMLInputElement>`	—	单选框引用

支持其他 radio 属性。className 和 style 作用于标签容器。

RadioGroup 的 label、aria-label 或 aria-labelledby 应至少提供一种分组名称。选项 label 与 value 建议保持稳定；value 使用不重复的字符串。

类型

RadioProps 和 RadioGroupProps 用于定义组件属性。单独组装选项列表时，可以使用 RadioOption：

import type { RadioProps, RadioGroupProps, RadioOption, ControlSize } from '@sudden3/leaf-ui';

const options: RadioOption[] = [
  { label: '浅色', value: 'light' },
  { label: '深色', value: 'dark' },
];

RadioOption

属性	类型	默认值	说明
`label`	`string`	必填	选项文字
`value`	`string`	必填	选项值，同组内应唯一
`disabled`	`boolean`	`false`	禁用该选项

#Radio 单选框

#分组选项

#受控与纵向排列

#RadioGroup API

#Radio API

#类型