设计
设计指南
设计原则
样式指南
设计资源
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 | - |