BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Dropdowns

Variations

There are 3 variations of dropdowns.

1. Outline

Dropdown variation outline

The Outline style are MetLife’s existing text fields from http://ux.metlife.com/patterns/forms

2. Outline on dark background

Dropdown variation outline on dark background

Used on dark backgrounds such as when a dropdown overlays the blue header. The label is within the field to not be lost against a dark background. Tap to open native picker.

3. Underline

Dropdown variation underline

Used sparingly, on pages that are not dense forms, such as Find a Provider. Tap to reveal menu options.

States

Outline

Default

Dropdown state outline default

Dropdown in a collapsed state. Text and border are MetLife Darkest Gray (#333333).

Selected

Dropdown state outline selected

When selected, field border is 1px in MetLife Blue 2 (#007ABC). The chevron points up to inform the user that they can tap again to close the dropdown.

Filled

Dropdown state outlined filled

Label and selection are the same as the Selected state, but border is MetLife Darkest Gray (#333333).

Error

Dropdown state outline error

Error state background color is light red (#FCE8E8), with a red (#DD2224) border and caption text.

Focused

Dropdown state outline focused

Focused state border is 3px in MetLife Blue 2 (#007ABC).

Outline on dark background

Default

Dropdown state outline dark default

Dropdown in a collapsed state. Text and border are MetLife Darkest Gray (#333333).

Selected

Dropdown state outline dark selected

When selected, field border is 1px in MetLife Blue 2 (#007ABC).

Filled

Dropdown state outline dark filled

Label and selection are the same as the Selected state, but border is MetLife Darkest Gray (#333333).

Error

Dropdown state outline error

Error state background color is light red (#FCE8E8), with a red (#DD2224) border and caption text.

Focused

Dropdown state outline dark focused

Focused state border is 3px in MetLife Blue 2 (#007ABC).

Underline

Default

Dropdown state underline default

Underline is 1px in MetLife Dark Blue (#0061A0).

Focused

Dropdown state underline focused

Focused state border is 3px in MetLife Blue 2 (#007ABC).

Selected

Dropdown state underline selected

On tap, the label animates to the top of the field and the selected dropdown option appears in MetLife Blue 2 (#007ABC).

Filled

Dropdown state underline filled

After a dropdown option has been selected and the dropdown exited, the selected option changes to MetLife Darkest Gray (#333333).

Usage

Dropdown menus let users easily choose from an ordered list of options. Dropdowns and accordion menus are not interchangeable - dropdowns contain actionable options, whereas accordions are used for displaying static information.

Dropdown usage first example
Dropdown usage second example
Dropdown usage third example
Dropdown usage fourth example

Animation

1. Outline

Both outline styles share the same label animation, which open native pickers.*********

2. Underline

Underline dropdowns behave as Underline accordions do. Dropdowns animate open or close upon a user tapping anywhere on title row/closed state of the component.

The menu content slides down from behind the closed state, as the arrow icon rotates to 180 degrees. Upon close, both elements reverse to hide the dropdown content.