Interrupteur

Bascule entre deux états mutuellement exclusifs ; rend un contrôle personnalisé role="switch".

Utilisation de base

Interrupteur contrôlé

Désactivé

État actuel : Désactivé

import { useState } from 'react'
import { LhSwitch } from '@lh-ui/react'

export default function Demo() {
  const [active, setActive] = useState(false)

  return (
    <>
      <LhSwitch checked={active} onChange={(val) => setActive(val)} />
      <LhSwitch
        checked={active}
        activeText="Marche"
        inactiveText="Arrêt"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Switch Props

Prop	Description	Type	Options	Valeur par défaut
checked	État contrôlé de l'interrupteur	boolean	—	—
defaultChecked	État par défaut (non contrôlé)	boolean	—	false
disabled	Désactivé	boolean	—	false
loading	En cours de chargement	boolean	—	false
activeText	Texte à l'état activé	string	—	Pack de langue switch.on
inactiveText	Texte à l'état désactivé	string	—	Pack de langue switch.off
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Switch

Événement	Description	Signature du callback	Équivalent Vue
onChange	Changement d'état (deux paramètres)	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

Interaction clavier

L'interrupteur répond à Enter / Space pour basculer, comme une checkbox native ; aria-checked reste synchronisé avec l'état courant.

Styles

import '@lh-ui/react/style/switch'