Skip to main content

Select Input

A select input presents users with a list of options within a form, allowing them to choose a single item from the list.

Overview

The purpose of select inputs is to allow users to easily and accurately choose a single option from a predefined list. Typically used in forms, they provide a compact and efficient way to present a list of options and enable user selection.

Select inputs consist of a clickable area that, when activated, displays the available options in a native dropdown menu. Users can then choose one option by clicking or tapping on it, and the selected option replaces the initially displayed selection.

A select input component showing a dropdown with multiple options.

Dos and Don'ts

Do
  • Only use within a form group as a form of data capturing.
Don't
  • Don't use a select input outside a form group, use a dropdown instead.
  • Don't use if there are fewer than three options, and use radio buttons instead.
  • Don't use for complex data entry.

Anatomy

Anatomy of a select input component showing the label, select field with chevron icon, and assistive text.
  1. Form label (Optional): The form label provides necessary content / information to a form.
  2. String: Placeholder or user inputted value.
  3. Chevron icon: Used to indicate there is additional content revealed when interacting with the dropdown.
  4. Assistive text (Optional): The assistive text provides additional instructional information / error / success messaging.
Anatomy of a select input component showing standard options and grouped options.
  1. Checkmark: Used to indicate that an option has been selected.
  2. Select option (Optional): Allows the user to deselect an existing choice.
  3. Option: These represent the available selections that the user can choose from.
  4. Option group: A way to organise related options into logical categories.

Variations

Default

Default select input component showing a dropdown with options.

Grouped options

Organising options into logical categories can help users better understand the content within the select input.

Select input with options organised into logical groups for better categorization.

Modifiers

Leading icon

Use a leading icon for non-interactive icons that visually support the select input.

Select input with a leading icon that provides visual context.

Sizes

Height

Use a consistent select input height when it is being used alongside other form components on the same page.

Small

Use when there isn't enough vertical space for the default select input size.

Small-sized select input for limited vertical space.

Medium

Default size and should be used whenever possible.

Medium-sized select input.

Large

Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a select input is placed by itself on a page.

Large-sized select input.

Content

All content should use sentence case.

Select option

The recommended text is “Selected...”, but it can be modified if necessary with contextual changes.

A select input component with a Select placeholder.
Select input showing dropdown with the first option preselected.

Options

  • Describe the option succinctly.
  • We recommend presenting the options in alphabetical order.

Overflow

Field

If the selected option exceeds its available visible bound, the content truncates.

Select input showing truncated text that exceeds the available space.

Options

If the option label exceeds the width of the form element, the popover container will expand horizontally to accommodate the label. It will continue to grow until it reaches the device's maximum width, at which point the label will wrap onto a new line.

Select input dropdown showing a long option text that extends beyond the normal width.
Select input dropdown showing a long option text that wraps to a new line when it reaches maximum width.

Behaviors

Preselection

The first option is preselected by default and remains selected until the user manually chooses a different option.

Select input showing closed state with 'Select...' placeholder and the same input with dropdown open showing the first option preselected.
Select input showing closed state with 'Option 1' already selected and the same input with dropdown open showing Option 1 checked and additional options available.

Selection

Once the user selects an option, the popover closes automatically and the selection is displayed within the field.

Three-step selection process showing: initial select input, dropdown with options and Option 1 highlighted, and final state with Option 1 selected.

Interactive states

The select input has various states to communicate its current status to the user.

Field

Default

Select input in its default state.

Hover

Select input in hover state.

Active

Select input in active state with dropdown open.

Focus

Select input in focus state.

Disabled

Select input in disabled state.

Error

Select input in error state.

Options

Default

Select input options in default state.

Hover / Focus

Select input options in hover/focus state.

Disabled

Select input options in disabled state.

Examples

LTR examples

Here are some examples of select inputs in left-to-right context:

Two select inputs in LTR format: one closed showing 'Select...' and another open showing file type options (PDF, JPEG, SVG).
Two select inputs in LTR format: one closed showing 'This week' and another open showing time period options (Today, This week, This month, This year).

RTL examples

Here are some examples of select inputs in right-to-left context:

Two select inputs in RTL format: one closed showing Hebrew text and another open showing file type options (PDF, JPEG, SVG) with Hebrew labels.
Two select inputs in RTL format: one closed showing Hebrew text and another open showing time period options in Hebrew.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Alpha
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 N/A