Определение

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

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

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

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

Построение

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