JGuang

单选框

Radio · Arco Design

交互预览
npm install @arco-design/web-react@2.66.18

单选框 Radio

在一组相关且互斥数据中,用户仅能选择一个选项。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css,用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter,否则 Message、Modal 等命令式 API 无法渲染。

示例

  • 基础用法:基础单选框。
  • 单选框组:单选组的用法。有两种用法,可以通过 children 的方式或者 options 数组的方式。
  • 竖直单选组:设置 direction="vertical" 可以展示竖直的单选组。
  • 带图标的单选框:单选框可以与图标进行组合。
  • 按钮类型:指定 type=button,单选框会展示为按钮样式。
  • 不同尺寸:按钮类型的单选框分为 4 个尺寸,分别为 mini, small, default, large。
  • 自定义节点内容:可以通过传入函数类型的 children 来自定义渲染单选节点。(2.29.0)

示例来自 Arco Design 官方仓库(MIT),固定在 npm 2.66.18 对应的提交;部分示例使用在线图片或上传地址,预览中网络请求被禁用。

API

Radio

参数名描述类型默认值
checked是否选中(受控模式)boolean-
defaultChecked初始是否选中boolean-
disabled是否禁用boolean-
className节点类名string | string[]-
style节点样式CSSProperties-
value控件的 valueT-
onChange值变化的回调(checked: boolean, event: ChangeEvent) => void-

Radio.Group

参数名描述类型默认值
disabled禁用boolean-
nameRadio 的 namestring-
direction方向'vertical' | 'horizontal'horizontal
size按钮类型的单选框尺寸(只在按钮类型下生效)'small' | 'default' | 'large' | 'mini'-
type单选的类型,是单选还是按钮'radio' | 'button'radio
className节点类名string | string[]-
defaultValue默认选中的值any-
options以数组配置的形式来设置单选组(string | number | { label: ReactNode; value: any; disabled?: boolean })[]-
style节点样式CSSProperties-
value选中的值(受控模式)any-
onChange点击单选的回调(value: any, event: ChangeEvent) => void-