NativeSelect
Компонент для создания выпадающего списка на основе нативного HTML-элемента select
.
Используется для выбора одного значения из списка опций.
Связанные компоненты:
Режим работы
Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.
Для использования неконтролируемого режима достаточно просто не передавать value
или передавать defaultValue
, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств value
/onChange
для задания значения и его изменения.
// Неконтролируемое состояние
<NativeSelect defaultValue="f">
<option value="f">Женский</option>
<option value="m">Мужской</option>
</NativeSelect>;
// Контролируемое состояние
const [gender, setGender] = React.useState('f');
<NativeSelect value={gender} onChange={(_, newGender) => setGender(newGender)}>
<option value="f">Женский</option>
<option value="m">Мужской</option>
</NativeSelect>;
Состояния
disabled
Свойство disabled
блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.
Валидация
Свойство status
используется для визуализации валидации компонента - некорректности заполненного поля (значение "error"
)
или успешной валидации (значение "valid"
).
Доступность (a11y)
Компонент построен на основе нативного HTML-элемента select
, что обеспечивает базовую доступность. Для улучшения доступности рекомендуется:
- всегда добавлять
label
для селекта; - использовать
aria-label
илиaria-labelledby
, если визуальный заголовок отсутствует; - добавлять
aria-describedby
для дополнительного описания, если оно есть.
Для улучшения доступности рекомендуется использовать обёртку FormItem
для компонента NativeSelect
для
поддержки заголовка и описания поля.
Свойства и методы
Свойство | Описание |
---|