Components

Select

Select provides a space-efficient way to make a selection from a list of options.

select: select

Usage

Select is suitable for handling a longer list of options for the user to pick from. For shorter list of options, consider using a radio group. Only one option may be chosen by the user. Options are presented as text, with an optional icon. The expandable menu can be presented with the native option available to the users device, or as a custom menu, with icon support.

Native menu

select: select — Native menu

The select component utilizes the native menus of the user device, in the example an iOS menu.

Custom menu

select: select — Custom menu

As an alternative the select component can utilize a custom menu, with support for, among other features, leading icons.

Use the appropriate component for the task

select: Use the appropriate component for the task — Choose the appropriate tool for the interaction pattern.
Choose the appropriate tool for the interaction pattern.
select: Use the appropriate component for the task — example 2
Don’t use select when there are more appropriate components to accomplish the intended functionality. For example, if the available options are yes/no or on/off, a checkbox may be preferable.

Interaction states

Default

select: Interaction states — Default

The default state, prior to user interaction.

Focus

select: Interaction states — Focus

The select component is in focus.

Error

select: select — Error

Validation has failed and an error message is displayed

Disabled

select: select — Disabled

The Select component is not available for interaction. For accessibility considerations, avoid using the disabled state in your designs if possible.

List options in a natural order

Make sure your list is ordered in a predictable fashion to allow the user to easily find the desired option.

select: List options in a natural order — Order your list of options in natural manner.
Order your list of options in natural manner.
select: List options in a natural order — Don’t order your list in a manner that unpredictable or confusing, such as ordering a list of the months of the year alphabetically.
Don’t order your list in a manner that unpredictable or confusing, such as ordering a list of the months of the year alphabetically.

Formatting

Anatomy

select: Anatomy
  1. Label text
  2. Placeholder / selection
  3. Help text
  4. Error text
  5. Leading icon
  6. Dropdown indicator
  7. Container

Label text

Describes the expected input, e.g. “Month” for a scenario where the user is asked to select a month of the year. Keep the label text short, clear and concise, and pursue to make it no longer than a few words.

Placeholder text

In case a first default option is not pre-selected, the placeholder text can be used to further guide the user.

Selection text

Displays the currently selected option.

Help text

The help text is an optional field that can be used to provide additional guidance or contextual information about the expected options. Consider using the help text when extra clarification is needed for the user to complete their task.

Error text

An error message can be displayed if the user has omitted making a required selection, or an invalid selection has been made.

Modify

Outline variant

The select component is available as an outline variant, where the background of the container is omitted. When using, be aware of accessibility considerations for the input and placeholder text against the underlying background.

select: Outline variant

Input in solid and outline variants.

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se