logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.3
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Radio
单选框

用于在多个备选项中选中单个状态。
使用import { Radio } from "antd";
源码components/radio
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
tsx
// 使用 Radio.Group 组件时,推荐的写法 ✅
return (
<Radio.Group
value={value}
options={[
{ value: 1, label: 'A' },
{ value: 2, label: 'B' },
{ value: 3, label: 'C' },
]}
/>
);
// 不推荐的写法 🙅🏻‍♀️
return (
<Radio.Group value={value}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
</Radio.Group>
);

代码演示

基本

最简单的用法。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
单选组合

一组互斥的 Radio 配合使用。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Block 单选组合

block 属性将使 Radio.Group 撑满父容器。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
5.21.0
按钮样式

按钮样式的单选组合。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
大小

大中小三种组合,可以和表单输入框进行对应配合。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

不可用

Radio 不可用。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Radio.Group 垂直

垂直的 Radio.Group,配合更多输入框选项。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code





Radio.Group 组合 - 配置方式

通过配置 options 参数来渲染单选框。也可通过 optionType 参数来设置 Radio 类型。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
单选组合 - 配合 name 使用

可以为 Radio.Group 配置 name 参数,为组合内的 input 元素赋予相同的 name 属性,使浏览器把 Radio.Group 下的 Radio 真正看作是一组(例如可以通过方向键始终在同一组内更改选项)。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
填底的按钮样式

实色填底的单选按钮样式。

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Radio/Radio.Button

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

Radio.Group

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

参数说明类型默认值版本
buttonStyleRadioButton 的风格样式,目前有描边和填色两种风格outline | solidoutline
defaultValue默认选中的值any-
disabled禁选所有子单选器booleanfalse
nameRadioGroup 下所有 input[type="radio"] 的 name 属性。若未设置,则将回退到随机生成的名称string-
options以配置形式设置子元素string[] | number[] | Array<CheckboxOptionType>-
optionType用于设置 Radio options 类型default | buttondefault4.4.0
size大小,只对按钮样式生效large | middle | small-
value用于设置当前选中的值any-
block将 RadioGroup 宽度调整为其父宽度的选项booleanfalse5.21.0
onChange选项变化时的回调函数function(e:Event)-

CheckboxOptionType

属性说明类型默认值版本
label用于作为 Radio 选项展示的文本string-4.4.0
value关联 Radio 选项的值string | number | boolean-4.4.0
style应用到 Radio 选项的 styleReact.CSSProperties-4.4.0
classNameRadio 选项的类名string-5.25.0
disabled指定 Radio 选项是否要禁用booleanfalse4.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 选项是否必填booleanfalse4.4.0

方法

Radio

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

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
buttonBg单选框按钮背景色string#ffffff
buttonCheckedBg单选框按钮选中背景色string#ffffff
buttonCheckedBgDisabled单选框按钮选中并禁用时的背景色stringrgba(0,0,0,0.15)
buttonCheckedColorDisabled单选框按钮选中并禁用时的文本颜色stringrgba(0,0,0,0.25)
buttonColor单选框按钮文本颜色stringrgba(0,0,0,0.88)
buttonPaddingInline单选框按钮横向内间距number15
buttonSolidCheckedActiveBg单选框实色按钮选中时的激活态背景色string#0958d9
buttonSolidCheckedBg单选框实色按钮选中时的背景色string#1677ff
buttonSolidCheckedColor单选框实色按钮选中时的文本颜色string#fff
buttonSolidCheckedHoverBg单选框实色按钮选中时的悬浮态背景色string#4096ff
dotColorDisabled单选框圆点禁用颜色stringrgba(0,0,0,0.25)
dotSize单选框圆点大小number8
radioSize单选框大小number16
wrapperMarginInlineEnd单选框右间距number8
全局 Token如何定制?