Back to components

Dropdown Select

The Dropdown Select component allow users to select one option from a temporary modal menu.

Table of Contents

Edit this section, Opens in new window

Overview

The Dropdown Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

Edit this section, Opens in new window

Usage

Use the Dropdown Select component when:

  • Displaying all options will draw user's attention
  • It is not encouraged for users to change the default option
  • A large number of familiar options are available
  • You have more than 7 options

See Patterns/Selection controls for more information regarding when to use selection controls.

With help text

Hur många våningar har ditt hus?
Golvräkning kan påverka totalpriset
Edit this section, Opens in new window

Behaviours

Interactions

Focused
Invalid
Ett valideringsfel
Invalid with error message

Modifiers

Required

Closed

Disabled

Edit this section, Opens in new window

Anatomy

No selection made

No selection made
  1. Placeholder

Selected

Selected
  1. Selected item
Edit this section, Opens in new window

Specs

Edit this section, Opens in new window
Contact us, Opens in new window