Switch
Переключатель, позволяющий пользователям выбрать между парой противоположных состояний,
например, включено/выключено.
Наследует все свойства нативного <input type="checkbox"> с дополнительными возможностями кастомизации.
Режим работы
Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.
Для использования неконтролируемого режима достаточно просто не передавать checked или передавать defaultChecked, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств checked/onChange для задания значения и его изменения.
// Неконтролируемое состояние, по умолчанию в состоянии "выбран"
<Switch defaultChecked />;
// Контролируемое состояние, значение "не выбран"
const [checked, setChecked] = React.useState(false);
<Switch checked={checked} onChange={(event) => setChecked(event.target.checked)} />;Состояния
disabled
Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.
Доступность (a11y)
Доступность реализована на основе рекомендаций из Switch WAI-ARIA design pattern ↗.
Свойства и методы
| Свойство | Описание |
|---|---|
getRef | Ref<HTMLInputElement>По умолчанию: - |
getRootRef | Ref<HTMLLabelElement>По умолчанию: - |