Dropdown - Keep React

The Dropdown Component is a versatile user interface element that provides users with a menu of selectable options. With a wide range of customization options, including labels, icons, search bars, checkboxes, and more, the Dropdown Component enhances user interaction by offering intuitive and flexible selection functionalities.

The Default Dropdown represents some list items as a dropdown items with <Dropdown.Item> components and the <Dropdown> is a wrapper button where user can click to show the dropdown items. dismissOnClick={true} props means when the user select a dropdown item dropdown will be closed.

The Dropdown with Search Bar component features a search bar that allows users to filter and select from a list of fruit options.

The Dropdown with Both Side Icon component combines dropdown items with icons on both sides of the label.

The Dropdown with Both Side Icon component combines dropdown items with search bar <TextInput> component.

The dropdown with title description component represents the title and description in every dropdown items.

API Reference#

Here is a list of the props that you can pass to the dropdown component:

Property	Description	Type	Default
placement	Defines the placement of the dropdown.	top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end	bottom-start
trigger	Specifies the trigger behavior for the dropdown.	hover click	click
label	The content to display within the dropdown.	string	Dropdown Button
floatingArrow	Enables or disables the floating arrow within the dropdown.	boolean	false
arrowIcon	Enables or disables the arrow icon.	boolean	true

Dropdown - Keep React

Table of Contents#

Default Dropdown#

Dropdown With Search Bar#

Dropdown With Icon#

Dropdown With Icon And SearchBar#

Dropdown With Title Description#

API Reference#