Radio - 单选框

Demo

Last Changed

7 minutes ago

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" />
    <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?