Radio Group 单选组
基于 reka-ui 的 RadioGroup 原语构建的新粗野主义风格单选组，用于单项选择。
预览
自定义 aria-label
安装
pnpm dlx brutx-vue@latest add radio-group用法
<script setup>
import { ref } from 'vue'
import { RadioGroup, RadioGroupItem, Label } from 'brutx-ui-vue'
const selected = ref('comfortable')
</script>
<template>
<RadioGroup v-model="selected">
<div class="flex items-center gap-3">
<RadioGroupItem value="default" />
<Label for="default">Default</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="comfortable" />
<Label for="comfortable">Comfortable</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="compact" />
<Label for="compact">Compact</Label>
</div>
</RadioGroup>
</template>可访问性标签
通过 ariaLabel 为单选组提供可读名称，便于屏幕阅读器识别分组用途。当没有可见的分组标题（如 Label 或字段集标题）时尤为有用。
<script setup>
import { ref } from 'vue'
import { RadioGroup, RadioGroupItem } from 'brutx-ui-vue'
const density = ref('comfortable')
</script>
<template>
<RadioGroup v-model="density" aria-label="布局密度">
<div class="flex items-center gap-3">
<RadioGroupItem value="default" />
<span class="text-sm font-bold">默认</span>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="comfortable" />
<span class="text-sm font-bold">舒适</span>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem value="compact" />
<span class="text-sm font-bold">紧凑</span>
</div>
</RadioGroup>
</template>变体
| 变体 | 说明 |
|---|---|
default | 默认风格，选中时使用 Primary（珊瑚色）背景 |
secondary | 选中时使用 Secondary 背景 |
accent | 选中时使用 Accent 背景 |
success | 选中时使用 Success 背景 |
danger | 选中时使用 Danger 背景 |
<template>
<RadioGroupItem value="option" variant="danger" />
</template>尺寸
| 尺寸 | 说明 |
|---|---|
sm | 小尺寸（20 × 20） |
default | 默认尺寸（24 × 24） |
lg | 大尺寸（28 × 28） |
子组件
| 组件 | 说明 |
|---|---|
RadioGroup | 根容器，管理选中状态和键盘导航 |
RadioGroupItem | 单选项，每个选项对应一个可选值 |
API 参考
RadioGroup
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | undefined | — | 当前选中的字符串值，可通过 v-model 受控同步。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
name | string | undefined | — | 传递给单选组原语的表单字段名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
disabled | boolean | undefined | — | 禁用组内所有单选项。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
orientation | "vertical" | "horizontal" | undefined | — | 设置选项排列方向；vertical 为纵向，horizontal 为可换行的横向排列，默认纵向。 |
详情声明类型"vertical" | "horizontal" | undefined 字面量
默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
class | string | undefined | — | 追加到单选组根容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
ariaLabel | string | undefined | — | 为整个单选组提供屏幕阅读器可读的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/radio-group/RadioGroup.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [value: string] | 所选值变化时发出新字符串值，用于同步 v-model。 |
详情声明类型[value: string] 来源packages/ui/src/components/radio-group/RadioGroup.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#default | {} | 放置属于此组的 RadioGroupItem 子项。 |
详情声明类型{}来源packages/ui/src/components/radio-group/RadioGroup.vue | ||
RadioGroupItem
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value必填 | string | — | 此选项对应的字符串值；被选中时作为 RadioGroup 的 modelValue。 |
详情声明类型string 默认值详情
来源packages/ui/src/components/radio-group/RadioGroupItem.vue | |||
disabled | boolean | undefined | false | 禁用此选项；未禁用的其他组内选项仍可交互。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/radio-group/RadioGroupItem.vue | |||
class | string | undefined | undefined | 追加到单选项按钮根元素的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/radio-group/RadioGroupItem.vue | |||
variant | "accent" | "danger" | "default" | "secondary" | "success" | undefined | "default" | 设置单选项及其选中指示器的颜色变体。 |
详情声明类型NonNullable<"default" | "secondary" | "success" | "danger" | "accent" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/radio-group/RadioGroupItem.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置单选按钮和选中指示图标的尺寸。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/radio-group/RadioGroupItem.vue | |||
可访问性
- 键盘操作：方向键在单选项之间导航，空格键选中当前聚焦项
- ARIA 属性：选中项使用
aria-checked="true"，支持通过ariaLabel为分组提供可读名称 - 焦点管理：
Tab键聚焦到选中项或第一项，方向键在选项间循环移动焦点