Interruptor

Conmutador. Admite los textos de active/inactive, loading y disabled; se puede conmutar pulsando o con las teclas Enter/Space.

Interruptor

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhSwitch v-model="on" active-text="Modo nocturno" inactive-text="Modo diurno" name="theme" />
      <LhSwitch v-model="loading" loading />
      <LhSwitch v-model="on2" disabled />
    </div>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; align-items: center">
      <LhSwitch v-model="s" size="small" active-text="Pequeño" />
      <LhSwitch v-model="m" size="medium" active-text="Mediano" />
      <LhSwitch v-model="l" size="large" active-text="Grande" />
    </div>
    <p class="demo-note">En estado loading se desactiva el pulso y se muestra un indicador de carga; name se transmite al input nativo.</p>
  </div>
</template>

<script>
export default {
  data: () => ({ on: true, on2: false, loading: true, s: true, m: true, l: false }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
v-model	Estado del interruptor (model: modelValue/input)	boolean	false
activeText / inactiveText	Textos de ambos lados	string	''
loading	Cargando (pulso desactivado + indicador)	boolean	false
disabled	Desactivado	boolean	false
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
name	name nativo	string	''

Events

Evento	Descripción	Parámetros del callback
input	Evento de v-model	—
change	Se dispara al cambiar el estado del interruptor	(value)

Accesibilidad

El elemento raíz usa role="switch" + aria-checked/disabled; dentro de LhFormItem, en caso de fallo de la validación se aplica aria-invalid.