Search
Search and select options from a list.
Similar to Select, with searching as the primary interaction. Supports single and multiple selection. leftAddon and rightAddon place a button to the left or right of the field.
Live example
Example controls
Usage
import { Search } from '@prosazhin/pbcomponents';
const options = ['One', 'Two', 'Three', 'Four', 'Five'].map((display, index) => ({
display,
value: String(index),
}));
<Search
options={options}
placeholder='Placeholder'
/>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
size | 's' | 'm's · m | Component size. | m |
disabled | boolean | Disables interaction. | false |
error | boolean | Shows the error state. | false |
placeholder | string | Hint in an empty field. | — |
className | string | Class of the root element. | — |
wrapperClassName | string | Class of the outer wrapper. | — |
value | Option | Option[] | Currently selected choice. | — |
onChange | (value: Option | Option[]) => void | Called when the value changes. | — |
defaultValue | Option | Option[] | Initially selected choice. | — |
options | Option[] | List of searchable choices. | — |
multiple | boolean | Allows multiple values. | false |
leftAddon | ReactNode | Button or other element to the left of the field. | — |
rightAddon | ReactNode | Button or other element to the right of the field. | — |
popoverClassName | string | Class of the options list. | — |
popoverItemClassName | string | Class of an option. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.