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 блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Загружается...

Свойство status используется для визуализации валидации компонента - некорректности заполненного поля (значение "error") или успешной валидации (значение "valid").

Загружается...

Компонент построен на основе нативного HTML-элемента select, что обеспечивает базовую доступность. Для улучшения доступности рекомендуется:

  • всегда добавлять label для селекта;
  • использовать aria-label или aria-labelledby, если визуальный заголовок отсутствует;
  • добавлять aria-describedby для дополнительного описания, если оно есть.

Для улучшения доступности рекомендуется использовать обёртку FormItem для компонента NativeSelect для поддержки заголовка и описания поля.

СвойствоОписание