Radio
单选框

用于在多个备选项中选中单个状态。
使用import{ Radio }from"antd";

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
// 使用 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
codepen icon
External Link Icon
expand codeexpand code

一组互斥的 Radio 配合使用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0

按钮样式的单选组合。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

Radio 不可用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code





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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

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

CodeSandbox Icon
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

PropertyDescriptionTypeDefaultVersion
label用于作为 Radio 选项展示的文本string-4.4.0
value关联 Radio 选项的值string | number | boolean-4.4.0
style应用到 Radio 选项的 styleReact.CSSProperties-4.4.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如何定制?