Components
Select
Select allows for a space efficient way for the user to select one option from a predetermined list. Select utilizes the native menu of the device to display the list of options.
Interactive demo
This demo lets you preview the Select component, its variations and configuration options. Additional settings can be found under "Configuration".
Usage
Select is suitable for handling a longer list of options for the user to pick from. Only one option may be chosen by the user. Options can only be presented as text.
Alternatives for selection control
If the number of available options is short, a set of radio buttons or radio pills may be preferable, having the added benefit of being able to display all available options simultaneously. If the available options are simply yes/no or on/off, a checkbox is likely a better alternative. If the user experience can be enhanced by adding graphics (such as icons or brands) for the menu, the component Dropdown can be used as an alternative, which employs a custom menu picker.
Appropriate component for the task
Consider your options when choosing what tool to use.
List options in a natural order
Insofar possible, the list of options should be ordered in a predictable fashion.
Formatting
Anatomy
Select consists of a frame containing a title text and an icon indicating the current state of the component. A label is attached above the frame, and an error message can be displayed when required.
- Label
- Placeholder/ Title
- Frame
- Icon - Menu-down / Menu-up
- Error message
Label
The label should inform the user what choice is to be made.
Placeholder / title
Displays the currently selected option, or a prompt for the user to pick an option
Frame
A frame with a transparent background containing the selected option or prompt for the user. Be aware of the background upon which Select is placed to ensure accessibility is not compromised.
Icon
An icon indicating the collapsed / expanded state of the component.
Error message
The error message informs the user of an error with the selected option. Ideally the user should not be presented with an invalid option from the menu list, but in some cases this may be unavoidable as a result of compound configuration in a form.
Behavior
States
Select has two states: collapsed and expanded. The up/down arrow icon indicates the current state.
Collapsed
Expanded
Menu
Select utilizes the native menu of the user device and as such can vary in presentation and interaction. E.g. an iOS-device may have a different looking menu than a Windows desktop device, the benefit of which being the designer can be assured that the user will be presented with a familiar interface element. If full control of menu presentation is desired, consider Dropdown as an alternative.
Modify
Select can be extended or contracted horizontally as desired but usually expands to the horizontal edges of the surrounding frame. If shortened, be mindful of keeping enough space to fully display contents without cutoffs.
Smaller Margin
Select has a built-in top margin. The switch isLessSpace can be used if a smaller margin than the default is desired in your design.
Inverted
Select is available in inverted colors to be used on dark backgrounds.
Disabled
Select may be presented in a disabled state in situations where the user should not be able to interact with the component.