Radio

在一组互斥选项中选择一项，适合需要直接展示所有选项的表单设置。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于一组选项中的单选。多选用 Checkbox，分段参数选择用 Segmented；为组和选项提供可访问名称。

同组使用 bind:group 和不同的稳定 value；无初始选择可用 null。
组件支持取消当前项并写入 undefined，不能假定已选项永远不可取消；提供可读标签。

导入

import { Radio } from '@snowui-design-system/components';

用法

状态

选择

尺寸

禁用状态

变体

API 参考

属性	类型	默认值	示例	描述
`checked`	`boolean`	`false`	`bind:checked={selected}`	独立使用时以 bind:checked 双向绑定选中状态；点击或按 Space 切换，再次操作会取消。分组时选中状态由 group 与 value 是否相等决定。
`group`	`any`	`—`	`bind:group={selected}`	同组 Radio 绑定同一状态并提供不同 value。初始值应为已选项值；无初始选择可设为 null。取消当前项后写入 undefined，后续组联动仍有效。
`value`	`any`	`—`	`value="Components"`	当前选项对应的值，以严格相等与 group 比较；同组应使用唯一且稳定的值。
`size`	`ResourceSize \| number`	`—`	`size={42}`	控件占位尺寸，支持 12/16/20/24/28/32/40/48/80 及自定义数值；未传时优先继承尺寸上下文，否则为 16。图形占尺寸的 87.5%，不改变标签字号。
`disabled`	`boolean`	`false`	`disabled`	禁止点击与键盘切换，并移出 Tab 顺序；保留当前选中状态。
`variant`	`"outline" \| "filled"`	`"filled"`	`variant="outline"`	filled 使用粗选中环，outline 使用细外框与中心点；两者具有相同的选择行为。
`children`	`Snippet`	`—`	`<Radio>Components</Radio>`	显示在圆形控件旁的标签，可组合标题和说明；建议始终提供可读标签。
`singleLine`	`boolean`	`true`	`singleLine`	默认标签与控件保持单行，附件不压缩；窄宽时原始标签可省略显示并保留完整可访问名称，不复制 children。复杂多行内容可显式设为 false，由该内容拥有布局。需要全文提示时组合 Text lines={1}。
`gap`	`number`	`—`	`gap={42}`	继承 Frame 的间距 Token 序号；省略时使用原组件间距，显式值覆盖组件间距。有效间距至少 4 CSS px，包含零值、根字号及 gap-scale 缩放；较大首选值保留。
`enableResponsive`	`boolean`	`false`	`enableResponsive`	传递给 Frame 的响应式能力开关；按 Frame 的响应式配置处理布局。
`enableContext`	`boolean`	`false`	`enableContext`	传递给 Frame 的通用上下文能力开关；不控制 Radio 自身读取的尺寸与 Image 角标上下文。