设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
单选框 Radio
单选框、用于在多个备选项中选中单个状态。
- 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
组件展示
基本用法
不可用
options配置使用
按钮样式
实色填底
Radio Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| showType | 显示类型 | string | - |
| prefixCls | 自定义样式前缀 | string | - |
| className | 自定义class | string | - |
| defaultChecked | 初始是否选中 | boolean | - |
| checked | 指定当前是否选中 | boolean | - |
| style | 自定义样式 | CSSProperties | - |
| disabled | 失效状态 | boolean | - |
| onChange | 变化时回调函数 | ((e: RadioChangeEvent) => void) | - |
| autoFocus | 自动获取焦点 | boolean | - |
Radio.Button
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prefixCls | 自定义样式前缀 | string | - |
| className | 自定义class | string | - |
| defaultChecked | 初始是否选中 | boolean | - |
| checked | 指定当前是否选中 | boolean | - |
| style | 自定义样式 | CSSProperties | - |
| disabled | 失效状态 | boolean | - |
| onChange | 变化时回调函数 | ((e: RadioChangeEvent) => void) | - |
| autoFocus | 自动获取焦点 | boolean | - |
Radio.Group
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultValue | 选项组默认值 | any | - |
| value | 选项组value | any | - |
| name | name属性 | string | - |
| onChange | 选项组回调 | ((e: RadioChangeEvent) => void) | - |
| optionType | 选项子项类型 | "default" | - |
| buttonStyle | 选项按钮样式 | "outline" | - |
| size | 大小,只对按钮样式生效 | "default" | - |
| direction | 控制内部radio是纵向还是横向排列 | "vertical" | - |
| rowProps | 支持基础组件row的所有属性 | RowProps | - |
| prefixCls | 自定义样式前缀 | string | - |
| className | 自定义class | string | - |
| options | 指定可选项 | (string | - |
| disabled | 是否整组失效 | boolean | - |
| style | 自定义样式 | CSSProperties | - |











