Dropdown

Dropdown #

Dropdown is flexible form select component

import { PDropdown } from 'pearkit';

Basic #

Customsizable dropdown component with extra features.

Select Country

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"
/>

Colors #

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.

Select Country Yellow

Select Country Indigo

Select Country Cyan

<PDropdown color="yellow"/>

Disabled #

Disabled feature for custom dropdown component

Select Country

<PDropdown disabled={true}>

Accessibility (Not Ready Yet) #

None

Api #

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.

Drawer

Input