Switch - 开关

更新日期

2026-10-04 UTC

Demo

switch/demo.vue

brand 实色

accent 青色

small

disabled

当前：brand = true · accent = true

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

const brand = ref(true)
const accent = ref(true)
const small = ref(false)
</script>

<template>
  <div class="flex flex-col gap-5">
    <div class="flex flex-wrap items-center gap-6">
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="brand" aria-label="主色开关" />
        <span class="text-sm">brand 实色</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="accent" aria-label="青色开关" variant="accent" tone="cyan" />
        <span class="text-sm">accent 青色</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="small" aria-label="小号开关" size="sm" />
        <span class="text-sm">small</span>
      </div>
      <div class="flex items-center gap-2 op-60">
        <YlfSwitch :model-value="true" aria-label="禁用开关" disabled />
        <span class="text-sm">disabled</span>
      </div>
    </div>
    <p class="text-sm op-70">
      当前：brand = {{ brand }} · accent = {{ accent }}
    </p>
  </div>
</template>

开关：行为与可访问性基于 reka-ui（role="switch"、键盘 Space / Enter、焦点管理），外观使用共享主题 token —— reka 管行为，我们管皮肤。

Props

属性	说明	类型	默认值
v-model	开关状态	boolean	false
variant	on 态轨道	brand | accent	brand
tone	强调色，仅作用于 accent	blue | sun | cyan | coral | pink | green	blue
size	尺寸	sm | md	md
disabled	禁用	boolean	false

tone 接受 blue | sun | cyan | coral | pink | green，默认 blue（晴空蓝），只在 accent 下生效。旧 aurora 值映射到 accent。同一流程中的同类状态使用同一种颜色。

通过 aria-label 或关联的 <label for> 提供用途名称。Space / Enter 切换状态，禁用时不响应操作。name、value 和 required 透传给 Reka UI，用于原生表单提交。