Select
Выбор одного или нескольких вариантов из списка.
options содержит объекты { display, value, disabled, badge }. multiple включает множественный выбор; search добавляет поиск.
Живой пример
Настройки примера
Использование
import { Select } from '@prosazhin/pbcomponents';
const options = ['One', 'Two', 'Three', 'Four', 'Five'].map((display, index) => ({
display,
value: String(index),
}));
<Select
options={options}
placeholder='Placeholder'
/>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
size | 's' | 'm's · m | Размер компонента. | m |
disabled | boolean | Блокирует взаимодействие. | false |
error | boolean | Показывает состояние ошибки. | false |
placeholder | string | Подсказка в пустом поле. | — |
className | string | Класс корневого элемента. | — |
wrapperClassName | string | Класс внешней обёртки. | — |
value | Option | Option[] | Текущий выбранный вариант. | — |
onChange | (value: Option | Option[]) => void | Вызывается после изменения значения. | — |
defaultValue | Option | Option[] | Начальный выбранный вариант. | — |
options | Option[] | Варианты с display, value и необязательным disabled или badge. | — |
multiple | boolean | Разрешает несколько значений. | false |
search | boolean | Добавляет поиск по вариантам. | false |
searchPlaceholder | string | Подсказка в строке поиска. | — |
dropdownClassName | string | Класс списка вариантов. | — |
dropdownItemClassName | string | Класс пункта списка. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.