Переключатель

Переключение между двумя взаимоисключающими состояниями; рендерит пользовательский элемент управления role="switch".

Базовое использование

Контролируемый переключатель

Выкл

Текущее состояние: Выкл

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="Вкл"
        inactiveText="Выкл"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Switch Props

Свойство	Описание	Тип	Варианты	По умолчанию
checked	Контролируемое состояние переключателя	boolean	—	—
defaultChecked	Неконтролируемое состояние по умолчанию	boolean	—	false
disabled	Отключить	boolean	—	false
loading	Состояние загрузки	boolean	—	false
activeText	Текст во включённом состоянии	string	—	switch.on из языкового пакета
inactiveText	Текст в выключенном состоянии	string	—	switch.off из языкового пакета
size	Размер	'large' | 'middle' | 'small'	—	Следует за ConfigProvider
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращённые props макета	SxProps	—	—

События Switch

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onChange	Изменение состояния (два аргумента)	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

Взаимодействие с клавиатурой

Переключатель реагирует на Enter / Space, как и нативный checkbox; aria-checked синхронизирован с текущим состоянием.

Стили

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