Forms | SwitchTrack

SwitchTrack#

Descripción#

• La vía y el pulgar de un interruptor. Solo el dibujo, sin lógica de estado.

Props#

• on (boolean) — Estado del interruptor. Requerido.
• size ('small' | 'medium') — Tamaño del interruptor. Por defecto: 'small'.

Uso#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script setup lang="ts">
import { ref } from 'vue'
import SwitchTrack from '../forms/SwitchTrack.vue'
const enabled = ref(false)
</script>

<template>
  <button role="switch" :aria-checked="enabled" @click="enabled = !enabled">
    <SwitchTrack :on="enabled" size="small" />
  </button>
</template>

Notas#

• No escucha eventos ni emite; el botón que lo contiene maneja la interacción.
• Va marcado aria-hidden para evitar lecturas duplicadas en lectores de pantalla.