ToggleGroup
Сегментний перемикач — вибір одного значення з двох-чотирьох видимих одразу.
Сегментний перемикач — «згорнуті радіокнопки»: усі варіанти видимі
одразу, без кліку на відкриття. Вигляд успадковано від pills-варіанту
Tabs, але семантика інша — це radiogroup без панелей вмісту.
Приклад
В буфері: —
Вигляд: list
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
options* | ToggleOption[] | — | Опції перемикача. |
modelValue | string | number | undefined | Активне значення. Використовуйте через `v-model`. |
ariaLabel | string | undefined | Доступна назва групи. ОБОВ'ЯЗКОВА, якщо поруч немає видимого лейбла. |
size | smmd | "md" | Висота кнопок. На мобільному кожен розмір вищий за десктопний. |
block | boolean | false | Розтягнути сегменти на всю ширину контейнера. |
disabled | boolean | false | — |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: string | number] | Активне значення. Використовуйте через `v-model`. |
change | [value: string | number] | Обрано інший сегмент. |
Слоти
| Назва | Опис |
|---|---|
option | Власний рендер сегмента. |
Коли використовувати
Для 2–4 взаємовиключних варіантів, де користувач перемикається часто: вигляд списку, одиниця виміру, період (день/тиждень/місяць).
Коли НЕ використовувати
Для перемикання ВМІСТУ — це робота Tabs: тут немає панелей і стану «відкрито».
Для двох станів увімкнено/вимкнено потрібен Switch — сегментний перемикач для «так/ні» виглядає як зайве рішення.
Більше 4–5 варіантів — Select: сегменти перестають вміщатись.
Доступність
role="radiogroup" з role="radio" і aria-checked. Деактивовані
сегменти лишаються в DOM із disabled, щоб не «стрибає» ширина.