Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

Определение

Switch (переключатель) — элемент управления, используемый для переключения между двумя возможными состояниями: включение или выключение. Обычно применяется для активации или деактивации определенного параметра.

Разница между switch и checkbox заключается в том, что изменение состояния switch запускается непосредственно при его переключении, в то время как checkbox,  используется для маркировки состояния, которое должно работать вместе с операцией отправки.

Основные правила

  • Switch всегда должен сопровождаться текстом, определяющим состояние опции. Если текст не определен, коммутатор становится автономным (standalone).
  • Автономные переключатели (standalone) следует использовать только в том случае, если их связь с другими компонентами ясна и они обеспечивают достаточный контекст — например, в панелях приложений.
  • Для описания переключателя, используйте прилагательные, а не глаголы.
  • Вариант размера S более компанкты, поэтому их можно использовать внутри вдругих компонентов, например в таблицах или модальных окнах.
  • Пользователи должны быть предупреждены дополнительной подсказкой, если выбор переключающего компонента приведет к изменению контекста.
  • Switch лучше всего использовать для передачи активации (например, состояния включения / выключения), тогда, как checkbox лучше всего использовать для выбора (например, нескольких строк таблицы). У swich, в отличие от checkbox, не может быть состояния ошибки.

Построение

  • Список switch состоит из лейбла и списка пунктов. Каждый пункт включает в себя переключатель, текст и безопасную область. Безопасная область — прозрачный блок, в который помещены и выровнены по вертикали переключатель и текста пункта. Высота подложки равна 32px, ширина — не ограничена.
  • Список switch всегда выстраивается по вертикали и не может быть горизонтальным.
  • Соблюдение отступов внутри и снаружи — обязательное условие.