Radio - 单选框

更新日期

2026-10-04 UTC

Demo

radio/demo.vue

当前：iris

<script setup lang="ts">
import { ref } from 'vue'

const picked = ref('iris')
const options = [
  { label: '晴空蓝', value: 'sky' },
  { label: '鸢尾紫', value: 'iris' },
  { label: '兰紫粉', value: 'pink' },
  { label: '禁用项', value: 'disabled', disabled: true },
]
</script>

<template>
  <div class="flex flex-col gap-4">
    <YlfRadioGroup v-model="picked" :options="options" orientation="horizontal" aria-label="主题颜色" />
    <p class="text-sm op-70">
      当前：{{ picked }}
    </p>
  </div>
</template>

单选框组：行为与可访问性基于 reka-ui（role="radiogroup"、方向键 roving focus），外观使用共享主题 token。

Props

属性	说明	类型	默认值
v-model	选中值	string	—
options	选项列表	RadioOption[]	—
orientation	排列方向	vertical | horizontal	vertical
disabled	整组禁用	boolean	false

RadioOption

字段	说明	类型
label	文案	string
value	值	string
disabled	禁用该项	boolean?

options 支持只读数组。通过 aria-label 或 aria-labelledby 指定整组名称，单项名称来自 label。方向键跳过禁用项；name / required 透传给 Reka UI，可用于原生表单。