Search
Поиск и выбор вариантов из списка.
Похоже на Select, но ввод поиска является основным сценарием. Поддерживает одиночный и множественный выбор. leftAddon и rightAddon ставят кнопку слева или справа от поля.
Живой пример
Настройки примера
Использование
import { Search } from '@prosazhin/pbcomponents';
const options = ['One', 'Two', 'Three', 'Four', 'Five'].map((display, index) => ({
display,
value: String(index),
}));
<Search
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[] | Список вариантов для поиска. | — |
multiple | boolean | Разрешает несколько значений. | false |
leftAddon | ReactNode | Кнопка или другой элемент слева от поля. | — |
rightAddon | ReactNode | Кнопка или другой элемент справа от поля. | — |
popoverClassName | string | Класс списка вариантов. | — |
popoverItemClassName | string | Класс пункта списка. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.