Select
Выбор одного или нескольких вариантов из списка.
options содержит объекты { display, value, disabled, badge }. multiple включает множественный выбор; search добавляет поиск. badge в опции — пропсы Badge или готовый элемент. leftAddon и rightAddon ставят кнопку слева или справа от поля. В управляемом режиме снятие выбора очищает поле.
Живой пример
Настройки примера
Использование
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 (пропсы Badge или элемент). | — |
multiple | boolean | Разрешает несколько значений. | false |
search | boolean | Добавляет поиск по вариантам. | false |
searchPlaceholder | string | Подсказка в строке поиска. | — |
leftAddon | ReactNode | Кнопка или другой элемент слева от поля. | — |
rightAddon | ReactNode | Кнопка или другой элемент справа от поля. | — |
popoverClassName | string | Класс списка вариантов. | — |
popoverItemClassName | string | Класс пункта списка. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.