Select
Select one or multiple options from a list.
options contains { display, value, disabled, badge } objects. multiple enables multi-select; search enables filtering. An option's badge is either Badge props or an element. leftAddon and rightAddon place a button to the left or right of the field. In controlled mode, clearing the selection clears the field.
Live example
Example controls
Usage
import { Select } from '@prosazhin/pbcomponents';
const options = ['One', 'Two', 'Three', 'Four', 'Five'].map((display, index) => ({
display,
value: String(index),
}));
<Select
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[] | Choices with display, value and optional disabled and badge (Badge props or an element). | — |
multiple | boolean | Allows multiple values. | false |
search | boolean | Adds filtering of choices. | false |
searchPlaceholder | string | Search field hint. | — |
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.