Live Demo
Anatomy
Select is a composite component utilizing the input and menu components. After clicking into the input to open the menu, the user can filter the available options by directly typing in the input.
- Input field
- Input text
- Dropdown Arrow icon
- Menu Item
- Menu
Variations
Single Select allows the user to pick one option from a menu. Multiple Select allows the user to pick multiple options from a menu via checkboxes. Once selected, the items are shown as dismissible tags in the input field above
Layout
Guidelines
- Placeholder text in Select should provide concise, informative context for user interaction, like "Select country" or "Search names."
- Utilize Select when offering more than three options for user selection.
- For three or fewer options with a single-choice requirement, use Radio or Single-select control buttons.
- For three or fewer options allowing multiple selections, employ Checkbox or Multi-select control buttons.