Hero Image

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.

Radio pill

Radio pill

A set of radio pills allows the user to select one of multiple options.

Checkbox

Checkbox

A checkbox may be a better option for an on/off-switch.

Dropdown

Dropdown offers a custom menu with support for graphics, such as icons or logotypes.

Appropriate component for the task

Consider your options when choosing what tool to use.

Do: choose the most suitable tool

Do

Choose the best suited tool for the task.
Don´t: use less suitable tools when others are available

Don't

Use Select when more suitable components are available.

List options in a natural order

Insofar possible, the list of options should be ordered in a predictable fashion.

Do: order lists in a natural manner

Do

Order your list of options in a natural manner.
Don´t: order lists in unnatural manners

Don't

Order your list in a manner that is unpredictable or confusing, such as ordering a list of the months of the year alphabetically.

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.

Anatomy select
  1. Label
  2. Placeholder/ Title
  3. Frame
  4. Icon - Menu-down / Menu-up
  5. 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.

State collapsed select

Collapsed

State expanded select

Expanded

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.