Radio Group 单选组

从一组选项中选择一个值。

命令行安装

npx @loongship-kit/ui add radio-group

组件结构

角色	组件	职责	使用条件
根组件	RadioGroup	管理选中值和键盘导航	必需
单选项	RadioGroupItem	声明可选择的值并展示状态	必需

基础用法

Default Comfortable Compact

查看代码

<template>
  <RadioGroup v-model="density" aria-label="Density">
    <label class="vp-demo-label-row"><RadioGroupItem value="default" /> Default</label>
    <label class="vp-demo-label-row"><RadioGroupItem value="comfortable" /> Comfortable</label>
    <label class="vp-demo-label-row"><RadioGroupItem value="compact" /> Compact</label>
  </RadioGroup>
</template>

水平排列

Eastbound Westbound Northbound

查看代码

<template>
  <RadioGroup v-model="route" orientation="horizontal">
    <label><RadioGroupItem value="east" /> Eastbound</label>
    <label><RadioGroupItem value="west" /> Westbound</label>
    <label><RadioGroupItem value="north" disabled /> Northbound</label>
  </RadioGroup>
</template>

整组禁用

Eastbound Westbound

查看代码

<template>
  <RadioGroup default-value="east" disabled aria-label="Disabled route">
    <label class="vp-demo-label-row"><RadioGroupItem value="east" /> Eastbound</label>
    <label class="vp-demo-label-row"><RadioGroupItem value="west" /> Westbound</label>
  </RadioGroup>
</template>

API

RadioGroup（主组件）

属性

属性	类型	默认值	说明
v-model	AcceptableValue	-	当前选中值
defaultValue	AcceptableValue	-	非受控模式的初始值
orientation	'horizontal' | 'vertical'	'vertical'	排列方向和方向键导航方式
disabled	boolean	false	是否禁用整组
dir	'ltr' | 'rtl'	'ltr'	阅读方向
loop	boolean	false	方向键导航是否首尾循环
name	string	-	表单字段名
required	boolean	false	是否必填
as	string | Component	'div'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:modelValue	value: AcceptableValue	选中值改变时触发

插槽

插槽	参数	说明
default	—	放置 RadioGroupItem

子组件

RadioGroupItem — 单个单选项

属性

属性	类型	默认值	说明
value	AcceptableValue	-	当前单选项的值
disabled	boolean	false	是否禁用
id	string	自动生成	元素 id
name	string	继承单选组	表单字段名
required	boolean	继承单选组	是否必填
as	string | Component	'button'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

事件

事件	参数	说明
select	SelectEvent	选择前触发，调用 event.preventDefault() 可阻止选择

插槽

无内容插槽；选中圆点由组件自动渲染。