Forms · Selection · Stable

Switcher

Три варианта компонента: Switch — базовый тогл с треком и ползунком; Switcher / Ghost — Switch с подписью (caption) и иконкой-подсказкой; Switcher / Container — Ghost в интерактивном контейнере с hover/pressed фоном. Все варианты поддерживают SM и MD размеры.

Switch (базовый)

SM · MD
Вариант
SM — трек 32×20px
MD — трек 40×24px
Default (Off)
Checked (On)
С описанием
Disabled
Disabled Checked

Switch

Базовый тогл · может использоваться отдельно · SM · MD
Состояние
SM — трек 32×20px
MD — трек 40×24px
Примечание
Default (Off)
Трек stroke-neutral 1.5px
Hover
Трек nba-border
Checked (On)
Трек neutral-fill, ползунок вправо
Checked Hover
Трек neutral-fill-hover
Disabled
opacity: 0.4, cursor: not-allowed
Disabled Checked
Трек neutral-fill, opacity 0.4
Error
Outline 2px neg-default
Error Checked
Трек neg-default, ползунок вправо

Состояния Switch

Default · Hover · Checked · Disabled · Error
Состояние
Off
On (Checked)
Описание
Default
Трек — stroke-neutral (Off), neutral-fill (On)
Hover
Трек — nba-border (Off), neutral-fill-hover (On)
Disabled
opacity: 0.4, cursor: not-allowed
Error
Outline 2px neg-default (Off); трек neg-default (On)

Switcher / Ghost

Switch + Caption + Icon Help · SM · MD
Состояние
SM
MD
Описание
Default
Нейтральный трек, фон surface
Hover
Трек — nba-border
Checked (On)
Трек — neutral-fill, ползунок вправо
Checked + Hover
Трек — neutral-fill-hover
Disabled
Opacity 0.4, cursor not-allowed
Disabled Checked
Трек neutral-fill, opacity 0.4
Error
Outline 2px neg-default
Error Checked
Трек neg-default, ползунок вправо

Switcher / Container

Ghost в интерактивном контейнере · Hover/Pressed фон · SM · MD
Состояние
SM
MD
Описание
Default
Нет фона контейнера, прозрачный
Hover
Контейнер nba-20, трек нейтральный
Pressed
Контейнер nba-40
Checked (On)
Трек neutral-fill, нет фона контейнера
Checked + Hover
Контейнер nba-20, трек neutral-fill-hover
Disabled
Opacity 0.4, cursor not-allowed
Error
Outline 2px neg-default
Error Checked
Трек neg-default, ползунок вправо
Пример — настройки уведомлений

API

Switch · Switcher
Switch (базовый)
Prop
Тип
Default
Описание
checked
boolean
false
Состояние включён/выключен. Controlled компонент.
onChange
(checked: boolean) => void
—
Вызывается при переключении. Получает новое булево значение.
labelreq
ReactNode
—
Текст метки рядом с треком. Обязателен для доступности.
size
'sm' | 'md'
'md'
SM — трек 32×20px, ползунок 10px. MD — трек 40×24px, ползунок 12px.
disabled
boolean
false
Блокирует взаимодействие. Opacity 0.4, cursor not-allowed.
error
boolean
false
Состояние ошибки: outline 2px neg-default (Off), трек neg-default (On).
description
string
—
Подсказка под меткой. Отображается вторым рядом меньшим шрифтом.
Switcher (Ghost + Container)
Prop
Тип
Default
Описание
labelreq
string
—
Основной текст метки (16px/500).
caption
string
—
Подпись под меткой (12px/400). Опциональна.
iconHelp
boolean
false
Показывает иконку circle-help из Lucide рядом с меткой.
variant
'ghost' | 'container'
'ghost'
Ghost — без фона контейнера. Container — добавляет padding, radius и hover/pressed фон.
size
'sm' | 'md'
'md'
SM — трек 32×20px, отступы 8px. MD — трек 40×24px, отступы 10px.
checked
boolean
false
Состояние включён/выключен. Controlled.
error
boolean
false
Outline 2px neg-default на треке (Off), трек neg-default (On).
disabled
boolean
false
Opacity 0.4, cursor not-allowed.
onChange
(checked: boolean) => void
—
Вызывается при переключении.

Доступность

WCAG 2.2 AA · ARIA · Keyboard
ARIA

Разметка

  • Рендерится как <button role="switch"> с aria-checked="true|false"
  • Метка связана через <label> с htmlFor или через aria-label
  • При ошибке: aria-describedby на switch → id сообщения об ошибке
  • Заблокированный: атрибут disabled или aria-disabled="true"
  • Caption связывается через aria-describedby
Клавиатура

Навигация

  • Tab / Shift+Tab — переход между свитчерами
  • Space — переключение состояния On/Off
  • Enter — переключение (если не форма)
  • Disabled — исключён из tab-порядка
  • Каждый Switcher независим (не roving tabindex)
WCAG 2.2 AA

Контраст и размер

  • Текст метки: Lc ≥ 60 против фона страницы (APCA)
  • Touch target: MD ≥ 40px, SM ≥ 32px по вертикали
  • Error state: outline — не только цвет (WCAG 1.4.1)
  • Трек checked: neutral-fill контрастирует с ползунком white
  • Не использовать цвет как единственный индикатор состояния
Focus Ring

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • Применяется к треку компонента
  • Виден при навигации с клавиатуры (:focus-visible)
  • Скрывается при клике мышью — не мешает визуально

Правила использования

Когда · Чего избегать
Правила

Когда использовать Switch

  • Включение/выключение одного параметра без подтверждения
  • Настройки, которые вступают в силу немедленно
  • Независимые параметры (не взаимоисключающие)
  • Когда нужен бинарный выбор вместо Radio с двумя опциями
  • Container-вариант — для длинных списков настроек в формах
  • Группа Switch — вертикальный список без разрыва
Типичные ошибки

Чего избегать

  • Использовать для взаимоисключающего выбора — используйте Radio
  • Switch для действий с отложенным эффектом — используйте Button
  • Irreversible actions без confirmation (transfer, delete) — Button + Dialog
  • Горизонтальная группа Switch — нет стандартного паттерна
  • Switch вместо Checkbox в форме с Submit-кнопкой
  • Разные размеры Switch в одной группе настроек
Switch для действия — ошибка

Расположение свитча

labelPosition: right (default) · left
right (default)

Свитч слева, лейбл справа

left

Лейбл слева, свитч справа

State Explorer

Интерактивный тест состояний — переключай и смотри