Dropdown Component
- Kseniya Kamen
- 1 Component Variants
- 1.1 Default
- 1.2 Multi select
- 1.3 Filtering
- 2 Component states
- 2.1 Default State
- 2.2 Hover State
- 2.3 Active/Pressed State
- 2.4 Disabled State
- 2.5 Focus State
- 3 Modes
- 3.1 Light Mode
- 3.2 Dark Mode
- 4 Changelog
Dropdowns allow users to make a selection from multiple options
Component Variants
Default
The default dropdown only allows for the selection of a single item from the options list.
Multi select
A multi-select dropdown allows users to select multiple options from a lis
Filtering
As the user types, the list of options is filtered in real-time to match the user's input, making it easier to find and select the desired option form the long list
Component states
Default State
The standard appearance of the dropdown.
[example image]
Hover State
The appearance when the user hovers over the dropdown.
[example image]
Active/Pressed State
The appearance when the dropdown is clicked or pressed.
[example image]
Disabled State
How the dropdown appears when it's not interactive.
[example image]
Focus State
The appearance when the dropdown is focused, usually via keyboard navigation.
[example image]
Modes
Light Mode
[body copy]
Dark Mode
[body copy]
Changelog
Version | Date | Author | Description | Note/Impact |
|---|---|---|---|---|
1.0 | 22-08-2024 | @Kseniya Kamen | Initial release of documentation for dropdown component | n/a |
|
|
|
|
|