@gridui/radio-group

中文文档
2.0.1发布于 2026/11/01UNLICENSEDTypeScriptES Module

GridUI无线电组和丰富的单选择卡

中文使用文档
文档目录4 节
  1. 选择及表格
  2. 丰富的选择
  3. 共享网格边界
  4. 迁移

广播组

@gridui/radio-group 拥有 RadioGroup, Radio, RadioCard 作为一个 single-selection家庭。从包根目录导入并加载 @gridui/radio-group/styles.css 后 @gridui/theme/styles.css. 需要React和React DOM 19.2或更高版本,以匹配共享表单 生命周期的合同。该包不依赖于应用程序布局。

选择及表格

RadioGroup 保留字符串 value / onValueChange 对于受控状态和 defaultValue 对于地方政府来说。 onValueChange(value, details) 接待本地人 details.event; details.cancel() 防止不受控制的选择更新。 受控调用方拥有自己的状态,并且不能提交已取消的更改。 激活已选中的项不会触发值更改。 共享事件协议来自 @gridui/interaction.

小组前进 name, form, required, disabled,方向,循环,refs, 以及本地可访问性道具。 readOnly 允许焦点不改变 选择。项也尊重禁用的字段集。原生表单重置恢复 初始不受控制的值,除非重置事件被取消;控制电话 重置自己的状态。Radix拥有无线电语义、隐藏表单输入和键盘 导航。提供独立于项目标签的可访问组名。

import { Radio, RadioGroup } from "@gridui/radio-group";

<RadioGroup name="delivery" defaultValue="standard" aria-label="Delivery service">
    <label><Radio value="standard" /> Standard delivery</label>
    <label><Radio value="express" /> Express delivery</label>
</RadioGroup>

使用舒适的可见标签打击区域紧凑 Radio 控制。 Radio 和 RadioCard 可以共存于一个组中,并共享相同的选择上下文。

丰富的选择

RadioCard 添加必需的 label、可选 description,可选装饰 leading 节点, variant="outlined" | "plain" 来 RadioProps(不包括 asChild. 默认值为 outlined. 卡片仍然是原生的单选按钮,而不是链接 或者独立管理的开关。选择、表单所有权和回调保留 在 RadioGroup;卡片不拥有列或第二个选择模型。

标签和描述具有单独生成的关联。显式的 aria-label 或者 aria-labelledby 覆盖生成的名称。提供 aria-describedby 与描述关联相结合。 leading 是 隐藏在辅助技术之外,必须具有装饰性。保持每个槽空闲 嵌套的链接、按钮和输入;基本信息属于标签或 描述。所有插槽接受措辞内容。当地的裁判指着收音机 按钮,调用者单击/焦点处理程序可以阻止选择请求。

<RadioGroup defaultValue="standard" aria-label="Delivery service">
    <RadioCard value="standard" label="Standard delivery"
        description="Delivered in three to five working days." />
    <RadioCard value="express" label="Express delivery"
        description="Delivered on the next working day." />
</RadioGroup>

共享网格边界

轮廓变体拥有其功能边界。普通变体不添加外部 边境申报,所以 GridItem asChild 保留其结构接缝。它 不适用 border: 0,检查网格内部,或推断封闭布局。 两个变体都保留主题背景,因此网格接缝表面不会显示 通过卡体。 RadioGroup asChild 将布局委托给它的子节点,而不强制执行组的布局 默认的垂直伸缩安排。Grid仍然负责响应轨道, 共享边界和可选的单元格填充。

独立卡默认使用spacing令牌 16. 当与 GridItem asChild, GridItem的填充优先,包括0和响应值; 不管Grid和Radio-group样式表的顺序如何。呼叫者间隔公用事业 可以覆盖任意一个值。RadioCard不依赖Grid来应用此默认值。

import { Grid, GridItem } from "@gridui/grid";
import { RadioCard, RadioGroup } from "@gridui/radio-group";

<RadioGroup asChild defaultValue="standard" aria-label="Delivery service">
    <Grid columns={{ base: 1, md: 2 }} frame="cells">
        <GridItem asChild padding={16}>
            <RadioCard value="standard" variant="plain" label="Standard"
                description="Three to five working days." />
        </GridItem>
        <GridItem asChild padding={16}>
            <RadioCard value="express" variant="plain" label="Express"
                description="Next working day." />
        </GridItem>
    </Grid>
</RadioGroup>

迁移

进口 Radio, RadioGroup,以及他们的道具类型 @gridui/radio-group 而不是 @gridui/controls,并加载新的样式表。不再控制 包含或重新输出此家族。现有值、回调、引用、表单、 只读行为和键盘契约仍然可用。

版本与发布记录

@gridui/radio-group 共发布 6 个版本,首次发布于 2026/10/29;过去 12 个月发布了 6 个版本。

版本发布日期距今
2.0.1latest2026/11/012 天前
1.0.22026/10/313 天前
1.0.12026/10/294 天前
1.0.02026/10/295 天前
0.0.02026/10/295 天前
0.0.0-stage2026/10/295 天前

关于 @gridui/radio-group 的常见问题

@gridui/radio-group 是什么?

GridUI无线电组和丰富的单选择卡

如何安装 @gridui/radio-group?

在项目目录运行 npm install @gridui/radio-group,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^19.2.0)、react-dom(^19.2.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@gridui/radio-group 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@gridui/radio-group 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@gridui/radio-group 可以商用吗?

@gridui/radio-group 使用 UNLICENSED 许可。作者声明为 UNLICENSED,即不授予公开使用许可(与公共领域的 Unlicense 不同)。使用前需获得作者授权。以上为概括,不构成法律意见,请以许可原文为准。

@gridui/radio-group 还在维护吗?

最新版本 2.0.1 发布于 2026/11/01(2 天前);至今共发布 6 个版本,其中过去 12 个月发布了 6 个;首次发布于 2026/10/29。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。