Кнопка-переключатель состояний: включено или выключено. Например, включен или выключен Wi-Fi в телефоне.

Свойства

Неактивное состояние

Ошибка

Валидация

Чтобы показать ошибку валидации, привяжите переключатель к контролу формы, примените Validators.requiredTrue и поместите текст ошибки в kbq-error внутри переключателя.

Чтобы показывать ошибку в другой момент, передайте matcher во входное свойство errorStateMatcher. Варианты описаны в руководстве по валидации.

Смешанное состояние

Это состояние используется для отражения частичного выбора или неопределенности.

Загрузка

Во время загрузки переключатель выглядит неактивным, не реагирует на нажатия, но остается доступным для фокуса.

Крупный размер

Свойство big увеличивает типографику подписи и подсказки. Размер самого переключателя не меняется.

Содержимое

Подсказка

Подпись слева

Переключатель расположен справа от блока с названием поля и подсказкой. Для такой раскладки используйте labelPosition="left", значение по умолчанию — right.

Переключатель может располагаться справа и в строке после подписи.

Доступность

Если видимой подписи нет, задайте описание через aria-label или укажите существующий заголовок в aria-labelledby. Спроецированный kbq-hint становится описанием элемента и не входит в его название.

Свойства name и value передаются во внутренний <input type="checkbox">, поэтому переключатель участвует в нативной отправке формы.

Рекомендации

• Используйте переключатель для мгновенного переключения настроек, которые не требуют подтверждения. Например, изменения сразу применяются без кнопки «Сохранить». Если для сохранения требуется отправка формы, то используйте чекбокс.
• Не используйте переключатель, если варианты выбора не подходят под бинарную логику: включено или выключено, да или нет.
• Свойство clickAction (или токен KBQ_CHECKABLE_CLICK_ACTION для всего приложения) меняет реакцию на нажатие: check-indeterminate — поведение по умолчанию, check сохраняет смешанное состояние, noop оставляет управление состоянием приложению.