# @gridui/radio-group 中文文档

规范地址：https://npmcn.com/package/%40gridui/radio-group/

版本：2\.0\.1
npm 元数据更新时间：2026-11-01T02:50:02.072Z
中文译文更新时间：2026-11-01T07:41:28.631Z
软件包许可：UNLICENSED

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40gridui/radio-group
原文对照：https://npmcn.com/package/%40gridui/radio-group/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：35.7 kB，14 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0
- 首次发布：2026-10-28T17:03:19.121Z
- 最新版本发布：2026-11-01T02:50:01.868Z
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

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

## 安装

```sh
npm install @gridui/radio-group
```

也可以使用：`pnpm add @gridui/radio-group`、`yarn add @gridui/radio-group`、`bun add @gridui/radio-group`

## README

# 广播组

`@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拥有无线电语义、隐藏表单输入和键盘 导航。提供独立于项目标签的可访问组名。

```tsx
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` 是 隐藏在辅助技术之外，必须具有装饰性。保持每个槽空闲 嵌套的链接、按钮和输入；基本信息属于标签或 描述。所有插槽接受措辞内容。当地的裁判指着收音机 按钮，调用者单击/焦点处理程序可以阻止选择请求。

```tsx
<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来应用此默认值。

```tsx
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 是什么？

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 和提交记录判断。