Interruptor

Alterna entre dos estados mutuamente excluyentes; renderiza un control personalizado con role="switch".

Uso básico

Interruptor controlado

Desactivado

Estado actual: Desactivado

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="Activado"
        inactiveText="Desactivado"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Props de Switch

Prop	Descripción	Tipo	Opciones	Predeterminado
checked	Estado controlado del interruptor	boolean	—	—
defaultChecked	Estado predeterminado no controlado	boolean	—	false
disabled	Desactivado	boolean	—	false
loading	Cargando	boolean	—	false
activeText	Texto cuando está activado	string	—	Paquete de idioma switch.on
inactiveText	Texto cuando está desactivado	string	—	Paquete de idioma switch.off
size	Tamaño	'large' | 'middle' | 'small'	—	Según ConfigProvider
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Propiedad abreviada de diseño	SxProps	—	—

Eventos de Switch

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Cambio de estado (dos parámetros)	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

Interacción de teclado

El interruptor responde a Enter / Space para conmutar, igual que un checkbox nativo; aria-checked se sincroniza con el estado actual.

Estilos

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