Dropdown Menu
Dropdown menus are used to display a list of options that can be selected by the user. They are commonly used in forms, navigation, and other interactive elements.
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...Dropdown With Search
Section titled “Dropdown With Search”Loading Code Block...Disabled
Section titled “Disabled”Loading Code Block...Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| size | md | string | The size of the dropdown menu. |
| placeholder | Select... | string | The placeholder text for the dropdown menu. |
| showSearch | false | boolean | Whether to show the search input in the dropdown menu. |
| align | start | start | center | end | The alignment of the dropdown menu. |
| side | bottom | top | bottom | left | right | Which side the dropdown menu should open from. |
| width | auto | number | 'content' | 'auto' | The width of the dropdown menu. |
| disabled | false | boolean | Whether the dropdown menu is disabled. |
| options | [] | Array<{ label: string, value: string, icon? : ReactNode }> | An array of options to display in the dropdown menu. Each option should have a label and a value. |
| multiple | false | boolean | Whether the dropdown menu allows multiple selections. |