React 组件

UGRadio 单选框

用于从一组互斥选项中选择一个值；RadioGroup 管理组值、原生表单名、尺寸、禁用和排列方向。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGRadio, UGRadioGroup } from '@ug666/ui-react'

组内原生 radio 自动共享 name，鼠标和方向键行为保持一致。

免费版专业版企业版

当前选择：pro

少量短选项可横向排列，并在空间不足时自然换行。

ReactVue其他

互斥的复杂选项继续使用原生 radio 语义，不用多个 Button 模拟选中状态。

文本生成写作、摘要与结构化输出图像生成封面、插图与视觉草案

value 支持 string 与 number，不在状态层强制转为字符串。

低中高

可禁用整组或单项；尺寸从组传递，单项仍可覆盖。

小号可用单项禁用

整组禁用大号选中

aria-invalid 由表单字段注入时，默认与卡片型单选项都会显示明确错误边界。

请选择一项方案未选择保留_workspace_history_archive_20260805 的完整调用记录

不在 RadioGroup 中时，可用 checked/defaultChecked 和 onChange 管理单个原生 radio。

启用单项

组统一传递 name、form 和 required；非受控值在 reset 后恢复 defaultValue。

属性	类型	默认值	说明
value / defaultValue	string \| number	—	受控值或非受控初始值。
onValueChange	(value) => void	—	选中项变化时触发。
orientation	'horizontal' \| 'vertical'	'vertical'	子项排列方向。
name / form	string / string	自动生成 / —	原生 radio 组名，并可关联指定 id 的外部 form。
required	boolean	false	要求组内至少选择一项，并同步原生校验与 aria-required。
size / disabled	ControlSize / boolean	全局配置	统一控制组内尺寸和禁用状态。
原生属性 / ref	HTMLAttributes / Ref<HTMLDivElement>	—	透传到 role=radiogroup 的容器。

属性	类型	默认值	说明
value	string \| number	必填	当前选项值。
variant	'default' \| 'card'	'default'	短标签使用默认外观；标题、说明等丰富内容使用卡片型单选项。
checked / defaultChecked	boolean	— / false	独立使用时的受控状态或初始状态。
onChange	(value) => void	—	独立选中或组值变化时触发。
label / labelClassName	ReactNode / string	—	可点击标签内容及其容器样式。
size / disabled / name / required	原生及组件属性	继承组	组内优先继承组配置，独立使用时保留原生属性。
aria-invalid	原生 ARIA 属性	—	表单校验失败时同步无障碍语义和危险色边框；卡片外观同步标记整项。
id / ref	string / Ref<HTMLInputElement>	自动生成 / —	id 和 ref 均指向真实 radio input，可直接聚焦。