Interrupteur

Interrupteur à bascule. Prend en charge les libellés active/inactive, les états loading et disabled ; le clic ainsi que les touches Entrée/Espace permettent de basculer.

Interrupteur

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhSwitch v-model="on" active-text="Mode nuit" inactive-text="Mode jour" 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="Petit" />
      <LhSwitch v-model="m" size="medium" active-text="Moyen" />
      <LhSwitch v-model="l" size="large" active-text="Grand" />
    </div>
    <p class="demo-note">L'état loading désactive le clic et affiche un cercle de chargement ; name est transmis à l'input natif.</p>
  </div>
</template>

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

Props

Prop	Description	Type	Valeur par défaut
v-model	État de l'interrupteur (model : modelValue/input)	boolean	false
activeText / inactiveText	Libellés des deux côtés	string	''
loading	Chargement (clic désactivé + cercle)	boolean	false
disabled	Désactivé	boolean	false
size	Taille	'small' \| 'medium' \| 'large'	'medium'
name	name natif	string	''

Events

Événement	Description	Paramètre de callback
input	Événement v-model	—
change	Émis lors du changement d'état de l'interrupteur	(value)

Accessibilité

L'élément racine porte role="switch" + aria-checked/disabled ; placé dans un LhFormItem dont la validation échoue, il reçoit aria-invalid.