Select.md

Select

Компонент для выбора из списка.

const options = [
    { value: 'one', option: 'one' },
    { value: 'two', option: 'two' },
    { value: 'three', option: 'three' },
];

const [ select, setSelect ] = useState('two');

return(
    <Form>
        <Select
            id='select'
            value={select}
            options={options}
            onChange={setSelect}
        />
    </Form>
);

Свойства и методы

Prop name	Type	Default	Description
id	string		Идентификатор элемента ввода
value	string		Выбранное значение
options	{value: string, option: string, disabled?: boolean}[]		Список опций
onChange	(value: string) => void		Обработчик выбора
label?	string		Название элемента ввода
top?	string		Текст перед элементом ввода
bottom?	string		Текст под элементом ввода
placeholder?	string		Текст отображаемый в начале списка при отсуствии выбора
required?	boolean	false	Флаг обязательности для заполнения
disabled?	boolean	false	Флаг запрещения ввода данных

Особенности

При указании value отсутствующем в списке options будет считаться что выбор не сделан. В этом случае при включении флага required поле будет подсвечиваться как ошибочное, а кнопка отправки данных у формы будет обозначена как некликабельная.