ant-design/components/radio/index.zh-CN.md
二货爱吃白萝卜 0e9ac35e3c
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
fix: input work with Upload (#51874)
* fix: input work with Upload

* test: update snapshot
2024-12-03 19:07:28 +08:00

3.9 KiB
Raw Blame History

category group title subtitle description cover coverDark demo
Components 数据录入 Radio 单选框 用于在多个备选项中选中单个状态。 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original
cols
2

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。

代码演示

基本 不可用 单选组合 Radio.Group 垂直 Block 单选组合 Radio.Group 组合 - 配置方式 按钮样式 单选组合 - 配合 name 使用 大小 填底的按钮样式 测试 Badge 的样式 线框风格 组件 Token Upload Debug

API

通用属性参考:通用属性

Radio/Radio.Button

参数 说明 类型 默认值
autoFocus 自动获取焦点 boolean false
checked 指定当前是否选中 boolean false
defaultChecked 初始是否选中 boolean false
disabled 禁用 Radio boolean false
value 根据 value 进行比较,判断是否选中 any -

Radio.Group

单选框组合,用于包裹一组 Radio

参数 说明 类型 默认值 版本
buttonStyle RadioButton 的风格样式,目前有描边和填色两种风格 outline | solid outline
defaultValue 默认选中的值 any -
disabled 禁选所有子单选器 boolean false
name RadioGroup 下所有 input[type="radio"]name 属性 string -
options 以配置形式设置子元素 string[] | number[] | Array<CheckboxOptionType> -
optionType 用于设置 Radio options 类型 default | button default 4.4.0
size 大小,只对按钮样式生效 large | middle | small -
value 用于设置当前选中的值 any -
block 将 RadioGroup 宽度调整为其父宽度的选项 boolean false 5.21.0
onChange 选项变化时的回调函数 function(e:Event) -

CheckboxOptionType

Property Description Type Default Version
label 用于作为 Radio 选项展示的文本 string - 4.4.0
value 关联 Radio 选项的值 string | number | boolean - 4.4.0
style 应用到 Radio 选项的 style React.CSSProperties - 4.4.0
disabled 指定 Radio 选项是否要禁用 boolean false 4.4.0
title 添加 Title 属性值 string - 4.4.0
id 添加 Radio Id 属性值 string - 4.4.0
onChange 当 Radio Group 的值发送改变时触发 (e: CheckboxChangeEvent) => void; - 4.4.0
required 指定 Radio 选项是否必填 boolean false 4.4.0

方法

Radio

名称 描述
blur() 移除焦点
focus() 获取焦点

主题变量Design Token