Switch

Last updated

2026-10-04 UTC

Demo

switch/demo.vue

brand solid

accent cyan

small

disabled

Current: 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="Brand switch" />
        <span class="text-sm">brand solid</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="accent" aria-label="Cyan switch" variant="accent" tone="cyan" />
        <span class="text-sm">accent cyan</span>
      </div>
      <div class="flex items-center gap-2">
        <YlfSwitch v-model="small" aria-label="Small switch" 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 switch" disabled />
        <span class="text-sm">disabled</span>
      </div>
    </div>
    <p class="text-sm op-70">
      Current: brand = {{ brand }} · accent = {{ accent }}
    </p>
  </div>
</template>

Switch uses Reka UI for switch role, Space/Enter and focus. Shared tokens define its appearance.

Props

Prop	Description	Type	Default
v-model	On/off state	boolean	false
variant	On-state track	brand | accent	brand
tone	Accent hue, only for accent	blue | sun | cyan | coral | pink | green	blue
size	Size	sm | md	md
disabled	Disabled	boolean	false

Tone defaults to blue and affects accent only. Legacy aurora aliases accent. Use consistent colors for equivalent states in a workflow.

Name the purpose through aria-label or an associated label. Space/Enter toggle; disabled controls do not respond. Name, value and required forward to Reka for native form submission.