Dropdown
A drop-down provides a list of options from which a user may choose one or more options. In addition to representing a value in a form, selected options can be used for filtering or sorting existing content.
Usage
- Use dropdown in navigation menus to display sub-menus or additional navigation options.
- Utilise dropdown as filters to allow users to refine search results or filter data.
- Utilise dropdown to choose from a wide range of options.
Anatomy
The dropdown consists of a container with an input text button that triggers the dropdown, displaying a list with options.
Dropdown States
Dropdown comes in two states single and multiple select.
Dropdown / Single
Option 1
Option 2
Option 3
Dropdown / Multiple
Option 1
Option 2
Option 3
Combobox States
Combobox comes in two states single and multiple select.
Combobox / Single
React
Solid
Svelte
Vue
Combobox / Multiple
React
Solid
Svelte
Vue
Specifications
Structure and spacing measurements for dropdown.
Live Demo
The Dropdown is demonstrated in a live environment in this demo.