Select
Select components allow users to choose an option from a dropdown list. They are commonly used in forms to present a list of predefined options, providing a user-friendly way to input data.
Last updated
Select components allow users to choose an option from a dropdown list. They are commonly used in forms to present a list of predefined options, providing a user-friendly way to input data.
Last updated
The Select component simplifies data input by offering a compact dropdown list of predefined options, reducing the space needed for multiple choices.
Use Select when the user must choose from a predefined list of options that don’t exceed a manageable number.
In forms where space is a concern, Select allows compact input fields.
Select is ideal when users may pick one or multiple items from a dropdown, especially when there's a need for preselection.
Use Select components in forms or workflows where users must select a required value to continue, guiding them toward the necessary input.
Avoid using a Select component if users are deciding between just two choices. Radio buttons or toggles may be better suited.
Important actions, like submitting forms or performing key tasks, should not be hidden in a dropdown as it could hinder discoverability.
If all options need to be visible simultaneously, a Select component might not be ideal. Consider using a list or button group.
Since select dropdowns require an extra click, use buttons or radio options if fast, direct interaction is necessary.
Label: Text element that identifies the purpose of the Select dropdown.
Subtitle: Secondary text by the label, providing additional context or clarification.
Support: A note that clarifies any restrictions or instructions.
Hint: Helps guide the user on the expected selection.
Count (on the label): Displays the number of selected items or available options.
Icon Leading: Optional icon placed on the left, often indicating the nature of the content.
Tag: Visual indicator used when multiple selections are made, showing the selected items.
Placeholder or Preselected Option: The default option or placeholder text shown before the user makes a selection, indicating what action is needed.
Icon Trailing: The dropdown arrow or another visual indicator on the right side of the Select component, signaling that the menu can be expanded.
Menu Options: The list of selectable items within the dropdown.
Small
14
20
8
32
Medium
14
20
8
42
Large
16
24
8
50
Keyboard Navigation: Ensure users can open, navigate, and select from the dropdown using only the keyboard. Focus states should be clearly visible for each option.
Screen Reader Compatibility: All label, count, and option information should be conveyed effectively to screen readers. The selected state must be communicated clearly.
Accessible Instructions: Include clear instructions in the form label or support text so users with cognitive or visual impairments understand the purpose and function of the dropdown.
Consistent Styling: Select components should maintain a uniform style throughout the interface to avoid confusion, and alternate states (disabled, focus) should be evident.
Country Selector in Registration Forms: Use Select to allow users to choose a country when signing up or filling out a profile.
Payment Method Selection: For checkout pages, present payment options like credit cards, PayPal, or other methods in a dropdown list.
Filtering Items on E-commerce Sites: Use Select dropdowns to help users filter results by categories like price range, brand, or ratings.
Choosing File Types for Export: Allow users to pick an export format (PDF, CSV, XLS) when downloading data or files.
Language Preference on Websites: Dropdowns can let users pick their preferred language when visiting a site or using an app with multilingual support.
