单选组 AsamRadioGroup

组件关系

用于手写选项组合，搭配单选项或按钮单选项。直接传 options 时优先使用单选集合。

使用场景

通过 default 插槽组合多个选项并维护共享模型。与自动消费 options 的 Radio 集合入口分开。

组合与双向绑定

单项使用 value；label 用于显示或可访问说明，不依赖旧 label 充当选择值。禁用项无法更改。

组合与双向绑定

vue

<template>
	<div class="example">
		<AsamRadioGroup v-model="value">
			<AsamRadioItem value="design"> 设计 </AsamRadioItem>
			<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
			<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
		</AsamRadioGroup>
		<output>选择：{{ value }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamRadioGroupBasicExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';
const value = ref('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<AsamRadioGroup v-model="value">
			<AsamRadioItem value="design"> 设计 </AsamRadioItem>
			<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
			<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
		</AsamRadioGroup>
		<output>选择：{{ value }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamRadioGroupBasicExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';
const value = ref('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

禁用与组内覆盖

组 disabled 控制组内选择，子项显式 size 可覆盖组内继承。按钮项的 fill/textColor 由 Group 配置。

禁用与组内覆盖

vue

<template>
	<div class="example">
		<AsamRadioGroup v-model="value" size="big" :disabled="disabled">
			<AsamRadioItem value="design"> 继承 big </AsamRadioItem>
			<AsamRadioItem value="dev" size="small"> 覆盖 small </AsamRadioItem>
		</AsamRadioGroup>
		<AsamButton type="default" @click="disabled = !disabled"> 切换组禁用 </AsamButton>
		<output>选中：{{ value }}；组禁用：{{ disabled }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamRadioGroupStatesExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';
const value = ref('design');
const disabled = ref(false);
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<AsamRadioGroup v-model="value" size="big" :disabled="disabled">
			<AsamRadioItem value="design"> 继承 big </AsamRadioItem>
			<AsamRadioItem value="dev" size="small"> 覆盖 small </AsamRadioItem>
		</AsamRadioGroup>
		<AsamButton type="default" @click="disabled = !disabled"> 切换组禁用 </AsamButton>
		<output>选中：{{ value }}；组禁用：{{ disabled }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamRadioGroupStatesExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';
const value = ref('design');
const disabled = ref(false);
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

四档尺寸与上下文继承

四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。

四档尺寸与上下文继承

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamRadioGroup v-model="value" size="large">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamRadioGroup v-model="value" size="big">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamRadioGroup v-model="value" size="default">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamRadioGroup v-model="value" size="small">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamRadioGroup v-model="value">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamRadioGroupSizesExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
const value = ref('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

vue

<template>
	<div class="example">
		<div class="density-grid">
			<section data-density="large">
				<strong> large </strong>
				<AsamRadioGroup v-model="value" size="large">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="big">
				<strong> big </strong>
				<AsamRadioGroup v-model="value" size="big">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="default">
				<strong> default </strong>
				<AsamRadioGroup v-model="value" size="default">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
			<section data-density="small">
				<strong> small </strong>
				<AsamRadioGroup v-model="value" size="small">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
		</div>
		<AsamConfigProvider :size="density">
			<section data-density="inherited">
				<AsamRadioGroup v-model="value">
					<AsamRadioItem value="design"> 设计 </AsamRadioItem>
					<AsamRadioItem value="dev"> 开发 </AsamRadioItem>
					<AsamRadioItem value="off" disabled> 停用 </AsamRadioItem>
				</AsamRadioGroup>
			</section>
		</AsamConfigProvider>
		<div class="row">
			<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
			<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
		</div>
		<output>配置提供器：{{ density }}</output>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamRadioGroupSizesExample' });
import { ref } from 'vue';
import { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
const value = ref('design');
</script>

<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
	min-width: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asam-space-sm, 8px);
}

.density-grid {
	display: grid;
	gap: var(--asam-space-md, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

section {
	display: grid;
	gap: var(--asam-space-sm, 8px);
	min-width: 0;
}

output {
	overflow-wrap: anywhere;
	color: var(--asam-color-text-secondary);
}
</style>

ASAM 扩展与迁移

ASAM 扩展为四档 size 和组内上下文继承。default 插槽只负责展示。Item、Button、Group 不提供实例方法，不能调用集合或输入组件的 focus。事件及当前可用属性以下方实际公开类型为准。

自定义字段与自动渲染

options 的原始字段通过 props 映射 value/label/disabled；此 Group 自动渲染原始记录，不要求 raw。指定 type="button" 得到连续按钮。默认插槽存在时接管选项渲染；fill/textColor 控制激活按钮色，name/id/ariaLabel 供表单和无障碍使用。

原始字段映射与按钮选项

vue

<template>
	<div class="example">
		<AsamRadioGroup
			v-model="value"
			:options="options"
			:props="{ value: 'code', label: 'title', disabled: 'inactive' }"
			type="button"
			name="mapped-radio"
			aria-label="自定义字段单选"
		/>
		<output>当前 code：{{ value }}</output>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamRadioGroup } from '@asam-ui/ui';
const value = ref('design');
const options = [
	{ code: 'design', title: '设计' },
	{ code: 'develop', title: '开发' },
	{ code: 'off', title: '停用', inactive: true }
];
defineOptions({ name: 'AsamRadioGroupMappingDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}
</style>

vue

<template>
	<div class="example">
		<AsamRadioGroup
			v-model="value"
			:options="options"
			:props="{ value: 'code', label: 'title', disabled: 'inactive' }"
			type="button"
			name="mapped-radio"
			aria-label="自定义字段单选"
		/>
		<output>当前 code：{{ value }}</output>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamRadioGroup } from '@asam-ui/ui';
const value = ref('design');
const options = [
	{ code: 'design', title: '设计' },
	{ code: 'develop', title: '开发' },
	{ code: 'off', title: '停用', inactive: true }
];
defineOptions({ name: 'AsamRadioGroupMappingDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}
</style>

API 阅读方式

组无障碍名称使用 ariaLabel（模板中写 aria-label）；固定 2.14.7 源码已删除组的旧 label。单选项的 label 仍用于显示内容。

下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。

基础公开委托

透传基础控件的公开能力，保留 ASAM 四档尺寸与品牌样式。完整说明。

API

属性 `AsamRadioGroupProps`

属性名	说明	类型	默认值
`ariaLabel`	与 RadioGroup 中的 aria-label 属性相同	`string \| undefined`	—
`id`	原生 id 属性	`string \| undefined`	`undefined`
`disabled`	是否禁用单选框	`(AsamRadioGroupProps)["disabled"]`	`undefined`
`fill`	按钮形式的 Radio 激活时的填充色和边框色	`string \| undefined`	`""`
`type`	用于渲染选项的组件类型（例如 'button'）	`enum"button" \| "radio"`完整类型：`(AsamRadioGroupProps)["type"]`	`"radio"`
`props`	options 的配置	`(AsamRadioGroupProps)["props"]`	`工厂函数（每个实例创建）`
`name`	原生 name 属性	`string \| undefined`	`undefined`
`modelValue`	选中项绑定值	`(AsamRadioGroupProps)["modelValue"]`	`undefined`
`textColor`	按钮形式的 Radio 激活时的文本颜色	`string \| undefined`	`""`
`options`	选项的数据源， value 的 key 和 label 和 disabled可以通过 props自定义.	`(AsamRadioGroupProps)["options"]`	—
`validateEvent`	是否触发表单验证	`(AsamRadioGroupProps)["validateEvent"]`	`true`
`size`	单选框按钮或边框按钮的大小	`enum"large" \| "big" \| "default" \| "small"`完整类型：`AsamControlSize \| undefined`	`undefined`

事件 `AsamRadioGroupEmits`

属性名	说明	类型	默认值
`update:modelValue`	—	`[val: string \| number \| boolean \| undefined]`	—
`change`	—	`[val: string \| number \| boolean \| undefined]`	—

插槽 `AsamRadioGroupSlots`

属性名	说明	类型	默认值
`default`	—	`(() => unknown) \| undefined`	—

实例方法与状态 `AsamRadioGroupExpose`

用法与契约补充说明

基础公开委托

本入口直接委托底层依赖 2.14.7 对应组件的公开能力；公开 props/defaults、全部事件实参与插槽保持原生行为，仅增加 ASAM 四档尺寸与品牌样式。需要规范化 options、对象或字符串存储时使用本站 AsamRadio / AsamCheckbox 聚合入口。组内 Button 由原生样式处理首中尾连接、选中、禁用、焦点与键盘。

参数与事件补充说明

完整透传 2.14.7 的基础参数，并在适用时使用 ASAM 尺寸密度。

参数与事件说明

`ariaLabel`

必填：否；声明来源：上游声明。

`id`

必填：否；声明来源：上游声明。

默认值与来源

undefined（已安装运行时；已安装组件）

`disabled`

必填：否；声明来源：上游声明。

disabled 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

undefined（已安装运行时；已安装组件）

`fill`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

`type`

必填：否；声明来源：上游声明。

type 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："button" / "radio"

默认值与来源

"radio"（已安装运行时；已安装组件）

`props`

必填：否；声明来源：上游声明。

props 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

props.value: string | undefined — 上游声明
props.label: string | undefined — 上游声明
props.disabled: string | undefined — 上游声明

默认值与来源

工厂函数（每个实例创建）（实例工厂；已安装组件）

`name`

必填：否；声明来源：上游声明。

默认值与来源

undefined（已安装运行时；已安装组件）

`modelValue`

必填：否；声明来源：上游声明。

modelValue 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

undefined（已安装运行时；已安装组件）

`textColor`

必填：否；声明来源：上游声明。

默认值与来源

""（已安装运行时；已安装组件）

`options`

必填：否；声明来源：上游声明。

`validateEvent`

必填：否；声明来源：上游声明。

validateEvent 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

true（已安装运行时；已安装组件）

`size`

必填：否；声明来源：ASAM 声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："large" / "big" / "default" / "small"

默认值与来源

undefined（源码表达式；ASAM 声明）

AsamRadioGroupProps 公开类型视图

import type { AsamRadioGroupProps, AsamControlSize } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamRadioGroupProps
type PublicContract = {
	readonly "ariaLabel"?: string | undefined;
	readonly "id"?: string | undefined;
	readonly "disabled"?: (AsamRadioGroupProps)["disabled"];
	readonly "fill"?: string | undefined;
	readonly "type"?: (AsamRadioGroupProps)["type"];
	readonly "props"?: (AsamRadioGroupProps)["props"];
	readonly "name"?: string | undefined;
	readonly "modelValue"?: (AsamRadioGroupProps)["modelValue"];
	readonly "textColor"?: string | undefined;
	readonly "options"?: (AsamRadioGroupProps)["options"];
	readonly "validateEvent"?: (AsamRadioGroupProps)["validateEvent"];
	"size"?: AsamControlSize | undefined;
};

参数与事件说明

`update:modelValue`

必填：是；声明来源：上游声明。

`change`

必填：是；声明来源：上游声明。

AsamRadioGroupEmits 公开类型视图

import type { AsamRadioGroupEmits } from '@asam-ui/ui';

// AsamRadioGroupEmits
type PublicContract = {
	"update:modelValue": [val: string | number | boolean | undefined];
	"change": [val: string | number | boolean | undefined];
};

参数与事件说明

`default`

必填：否；声明来源：ASAM 声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): unknown

AsamRadioGroupSlots 公开类型视图

import type { AsamRadioGroupSlots } from '@asam-ui/ui';

// AsamRadioGroupSlots
type PublicContract = {
	"default"?: (() => unknown) | undefined;
};

AsamRadioGroupExpose 公开类型视图

import type { AsamRadioGroupExpose } from '@asam-ui/ui';

// AsamRadioGroupExpose
type PublicContract = {
	[key: string]: never;
};

单选组 AsamRadioGroup

组件关系 ​

使用场景 ​

组合与双向绑定 ​

组合与双向绑定

禁用与组内覆盖 ​

禁用与组内覆盖

四档尺寸与上下文继承 ​

四档尺寸与上下文继承

ASAM 扩展与迁移 ​

自定义字段与自动渲染 ​

原始字段映射与按钮选项

API 阅读方式 ​

基础公开委托 ​

API

属性 AsamRadioGroupProps

事件 AsamRadioGroupEmits

插槽 AsamRadioGroupSlots

实例方法与状态 AsamRadioGroupExpose

用法与契约补充说明 ​

基础公开委托 ​

关联组件

参数与事件说明

ariaLabel

id

默认值与来源

disabled

默认值与来源

fill

默认值与来源

type

默认值与来源

props

默认值与来源

name

默认值与来源

modelValue

默认值与来源

textColor

默认值与来源

options

validateEvent

默认值与来源

size

默认值与来源

参数与事件说明

update:modelValue

change

参数与事件说明

default

组件关系

使用场景

组合与双向绑定

禁用与组内覆盖

四档尺寸与上下文继承

ASAM 扩展与迁移

自定义字段与自动渲染

API 阅读方式

基础公开委托

属性 `AsamRadioGroupProps`

事件 `AsamRadioGroupEmits`

插槽 `AsamRadioGroupSlots`

实例方法与状态 `AsamRadioGroupExpose`

用法与契约补充说明

基础公开委托

`ariaLabel`

`id`

`disabled`

`fill`

`type`

`props`

`name`

`modelValue`

`textColor`

`options`

`validateEvent`

`size`

`update:modelValue`

`change`

`default`