Select
Allowing users to choose from a list of options. The component often appears as a popup menu where user clicks on the select button, to make a list of options appear.
Select button
Type
- Default
- With Label: Useful for displaying filter label
- Tertiary
- Icon
- Icon Tertiary
Size
Each select button size is designed to cater to different form or action needs, ensuring optimal readability and user experience.
State
- Default
- Hover
- Focused
- Disabled
Counter
A counter in a select button component is a small numeric indicator displayed within a button.
It provides a visual representation of a count related to the button's function, such as the number of selected filters, notifications, or items in a cart.
Icon only
The primary visual element of the button is an icon that clearly indicates the action or function without text.
E.g. 3-dots option icon, Plus icon.
Select menu
Select menu is a popup menu that appears upon user clicked a select button.
Menu list type
- Dropdown or Context menu
- Select: Multiple
- Select: Single
Menu list state
- Default
- Hover
- Disabled
- Selected
Dropdown menu
- “More” option menu
- With search function on top. 2a. Show overlapped “Clear” button at the bottom of the multi-select type context menu when at least ONE option is selected. If none is selected, hide it.
- With search function at the bottom.
Grouped menu items
The grouped context menu items enhance user interaction by organizing related items into easily accessible groups.
- The title of each group is usually placed at the start of the separation.
Dropdown menu size
Each context menu size is designed to cater to different form or action needs, ensuring optimal readability and user experience.