Switch
Перемикач із роллю switch і невидимою зоною натискання 44px.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
modelValue* | boolean | — | Стан перемикача. Використовуйте через `v-model`. |
label | string | — | Доступна назва. ОБОВ'ЯЗКОВА, якщо поруч немає видимого лейбла. |
disabled | boolean | — | — |
presentational | boolean | — | Суто візуальний режим: рендериться `<span aria-hidden>` без власної інтерактивності. Потрібен, коли перемикач стоїть УСЕРЕДИНІ кнопки-рядка меню: вкладені `<button>` у `<button>` — невалідний HTML. У такому разі `role="switch"` і `aria-checked` несе зовнішня кнопка, а перемикач лишається лише картинкою. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Новий стан перемикача. |
Коли використовувати
Для налаштування, що діє негайно. Якщо зміна застосується лише після натискання «Зберегти» — це чекбокс у формі, а не перемикач.
Коли НЕ використовувати
Не ставте перемикач без доступної назви. Якщо поруч немає видимого тексту,
label обов'язковий.
Доступність
role="switch" і aria-checked. У вихідних проєктах це був <div>
усередині <button>, де стан передавався лише кольором — для
скрінрідера перемикач просто не існував.
Окремої згадки вартий presentational. Коли перемикач стоїть усередині
кнопки-рядка меню, вкладені <button> у <button> — невалідний HTML. У
цьому режимі компонент рендериться як <span aria-hidden>, а роль і стан
несе зовнішня кнопка.
Сам перемикач навмисно дрібний: це індикатор, а не кнопка. Але 20×36 пальцем не влучиш, тому на тач-пристроях навколо нього є невидима зона 44×44 — візуальна щільність списків при цьому не страждає.