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

Переключатель вкл. / выкл. Поддерживает текст active/inactive, loading и disabled; переключение кликом или клавишами Enter / Space.

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

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap">
      <LhSwitch v-model="on" active-text="Ночной режим" inactive-text="Дневной режим" 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="Мал." />
      <LhSwitch v-model="m" size="medium" active-text="Сред." />
      <LhSwitch v-model="l" size="large" active-text="Больш." />
    </div>
    <p class="demo-note">В состоянии loading клики отключены и показывается кружок загрузки; name прозрачно передаётся нативному input.</p>
  </div>
</template>

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

Props

Проп	Описание	Тип	По умолчанию
v-model	Состояние переключателя (model: modelValue/input)	boolean	false
activeText / inactiveText	Текст по сторонам	string	''
loading	Состояние загрузки (клики отключены + кружок)	boolean	false
disabled	Отключено	boolean	false
size	Размер	'small' \| 'medium' \| 'large'	'medium'
name	Нативный name	string	''

Events

Событие	Описание	Параметры обратного вызова
input	Событие v-model	—
change	Срабатывает при изменении состояния переключателя	(value)

Доступность

Корневой элемент — role="switch" + aria-checked/disabled; внутри LhFormItem при провале валидации добавляется aria-invalid.