Dropdown is a component that displays content, such as a form or message, when triggered by a clickable item. This clickable item, also known as the trigger, can be a Select, Button, Input, or any other component.
Dropdown component consists of
The component doesn't have any fixed sizes since they are defined by the content inside it.
If dropdown changes its state while user interacts with it, don’t change the dropdown size (width and height).
Margin between trigger and dropdown is always 4px.
- by clicking on the trigger;
- by typing in the input.
Dropdown is hidden:
- by clicking outside the dropdown;
- by an action inside the dropdown (for example, by clicking the "Cancel" button);
- by clicking
- when input trigger loses
By default, the Dropdown component drops down from the trigger. However, if there isn't enough space below, it will drop in the opposite direction using Popper.js.
Dropdown component should maintain its position and not move when a user scrolls the page. For instance, if the dropdown opens upward, it should stay in that position even if the user scrolls the page.
Usage in UX/UI
- Don’t use dropdown inside dropdown.
- When dropdown is opened, the trigger should get the