Dropdown is flexible form select component
import { PDropdown } from 'pearkit';Customsizable dropdown component with extra features.
const [selected,setSelected] = useState({});
const countries = [
{label: 'Country 1', value: 'co1'},
{label: 'Country 2', value: 'co2'},
{label: 'Country 3', value: 'co3'},
{label: 'Country 4', value: 'co4'},
{label: 'Country 5', value: 'co5'}
]
<PDropdown
options={countries}
selected={selected}
onChange={setSelected}
placeholder="Select Country"
/>Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo etc.
<PDropdown color="yellow"/>Disabled feature for custom dropdown component
<PDropdown disabled={true}>None
Here you can see all the working features for the dropdown component.
| Name | Type | Default | Description |
|---|---|---|---|
| options | array | null | Options of the dropdown component |
| selector | string | label | Selector of array object list |
| onChange | function | null | OnChange callback function for setting data |
| selected | object | {} | Controlled by parent state prop |
| placeholder | string | Select Item | Placeholder of the dropdown component |
| itemComponent | elementType | null | For customsizable dropdown item component |
| color | string | blue | With this prop you can use all the names in the tailwindcss default color palette. |