Dropdown

Approved — Ready for dev

A dropdown provides a raised surface for displaying a list of contextual actions in front of the current view. The major benefit of utilizing dropdowns, based on the principle of progressive disclosure, is the ability to reduce clutter and cognitive load by grouping contextual UI behind an interaction. Dropdowns can be used for both Vue and Flutter experiences.

Dropdown

Anatomy

The dropdown component is made up of a trigger, raised surface, and a list of choices for the user to select from. The dropdown variations: menu dropdown, selection dropdown, and text field dropdown. Note: Only the menu variant can be used as multi-select. 

The extensions of the dropdown component (and each variant) can optionally include search or slot. The list items for the dropdown component can include text, Icon and text or account options. 

Menu Dropdown

The menu dropdown variant is triggered by tapping or clicking on either a static trigger or dynamic trigger (more on triggers at the bottom of this menu dropdown section). The trigger can be one of two options: quick action button or label and caret  — each trigger option has unique features and behaviors.

Quick Action Button

The quick action button trigger allows the dropdown to be triggered by interacting with the quick action button. Any icon can be used within the quick action button. What’s unique about this trigger option is a badge can be utilized to show how many selections have been made.

  1. Quick action component — Embedded QAB (any variant)
  2. Badge (optional)


Badges represent how many list items have been selected by the user. Usability when selecting multiple list items starts to take a hit when more than just a handful of selections are made. If a user may want to select more than 5 selection, consider using a different solution. A bottom sheet or side sheet could be a great place to list out a large group of chips that a user could add/remove one by one instead of tediously selecting from a dropdown (that could easily be cancelled inadvertently. 

Label and Caret

This combo trigger is unique because the caret will spin around to provide affordance for the user both when the dropdown is open or closed.

  1. Trigger label — Body 1
  2. Trigger icon

Static triggers

The static trigger maintains a consistent label and/or icon before and after a selection is made. Both the icon only trigger and quick action trigger are considered to be static since the icon will not change as a result of the user's selection. Both the label and icon combo trigger and the label and caret trigger can be static if the label does not change as a result of the user's selection.

  1. Label and caret trigger (before selection)
  2. Label and caret trigger (after selection)
  1. Quick action button trigger (before selection)
  2. Quick action button trigger (after selection)


Note: Although the quick action button cannot change as a result of a user's selection, a badge can be shown as a way to let the user know how many list items have been selected. A badge cannot be used with any other trigger types.

Dynamic triggers

The dynamic trigger updates the trigger label based on the user uselection, and requires a default selection. Only the label and icon combo trigger and the label and caret trigger can utilize the dynamic updating of the text label (since these are the only triggers with a text label that can be updated).

  1. Label and caret trigger (before selection)
  2. Label and caret trigger (after selection)

Selection Dropdown

The selection dropdown variant for choosing a value from a list item options. It is triggered by clicking the caret or anywhere on the text field area. Note: Only the values shown in the dropdown can be selected. A custom value cannot be entered.

  1. Select trigger (Focus state)
  2. Item Label - Body 1 
  3. Second Line- Caption (Optional)
  4. List Item Icon (Optional) - 24px
  5. Selected item indicator 
  6. Divider (Optional)
  7. Raised Surface

Text Field Dropdown

The dropdown uses an input text field as the trigger. In the focus state, it will show a dropdown of suggested values but the user has the option to type out a new value. A value does not have to be selected from the dropdown list and cannot use the account component. Note: On mobile views, instead of a bottom sheet this variant will still use a dropdown.

  1. Input field trigger (Focus state & before typing)
  2. Suggestions

  1. Input field trigger (Focused state & after typing)
  2. Input field typed (New value)

Account

The account trigger can house either single line or stacked body 1 with subtitle 2 variant. The dropdown list will show a list of accounts using any account variant defined by design. Within the account select, the only properties being shown will be the name of the account, account number and amount to allow more room. Note: The single line account variant is the default variant.

  1. Selection trigger (Static)
  2. Account component - Single line variant
  1. Selection trigger (Static
  2. Account component - Stacked with Subtitle 2 variant
  1. Selection trigger (Focus state)
  2. Account variant

Search

The search provides a way for the user to type out their value in the search field within the dropdown. The list items in the dropdown will filter out depending on what the user types. The search filter will be pinned to the top of the list and will stay if the user needs to scroll within the dropdown. Note: A value has to be selected from the dropdown list. If the user were to search for a value that is not in the list, a “No results found.” text will be displayed.

  1. Selection trigger (focus state)
  2. Search Icon - 24px
  3. Search Placeholder - Body 1
  4. Divider

Filtering

  1. Select trigger (Focused state)
  2. Search filtering

Empty state 

  1. Select trigger (focus state)
  2. Empty state of dropdown list - Caption

Selected state

  1. Input field trigger (focused state & while typing)
  2. Selected value
  3. Selected list item

Account

The search extension can be added to the account dropdown. The user has the option to choose from a list of accounts or search the accounts to filter the list.

  1. Selection trigger (Focus state & while typing)
  2. Search (Optional)
  3. Account component - Stacked with Subtitle 2 variant

International Phone Number Dropdown

The search extension can be added to the international phone number dropdown variant. 

  1. International phone dropdown trigger
  2. Search (Optional)

Menu Dropdown

  1. Quick Action Button Trigger
  2. Search (Optional)
  1. Label and Caret
  2. Search (Optional)

Slot

Slot is an optional section at the bottom of a dropdown where design will determine the content inside when there is a need for a call to action. 

Menu Dropdown

  1. Quick Action Trigger
  2. Slot (Optional)
  1. Label and Caret
  2. Slot (Optional)

Selection Dropdown

  1. Select trigger (Focus state)
  2. Slot (Optional)

Text Field Dropdown

  1. Input field trigger (Focus state & before typing)
  2. Slot (Optional)

Account

  1. Selection trigger (Focus state)
  2. Slot (Optional)

Mobile dropdown

On mobile views, the dropdown will change from a traditional dropdown to a bottom sheet. The only variant that will not follow this pattern will be the text field dropdown due to the user needing to type within the text field. Note: The title will pull in the label as default but it can also be custom text defined by design.

Limited Feature Bottom Sheet

The dropdown will change from a traditional dropdown to a limited feature bottom sheet once it hits the breaking point of 560px. This will trigger a partial bottom sheet that will auto-grow with the content inside it. The title of the bottom sheet will be pulled from the name of the select as well as a counter at the end of the number of items in the dropdown. Note: It will never trigger a full screen bottom sheet. 


In code, this bottom sheet will not technically be the usual Bottom Sheet component, but simply a re-styled version of the dropdown. Therefore this bottom sheet’s use is restricted from a normal Sheet’s elements such as Quick Action Buttons, headings, menu buttons, close or backstack buttons. Think of it as a glorified dropdown, stuck to the bottom of the screen.  

  1. Scrim
  2. Partial Bottom Sheet
  3. Title Heading with number of items in dropdown - Small heading (Optional)
  4. Second line - 
  5. Dropdown item 
  6. Selected item


Search within Bottom Sheet 

A bottom sheet with a search will be triggered if using the select with a filter property. It will open to a full partial bottom sheet with a search pinned to the top. When filtering, the size of the bottom sheet will stay the same but the content will filter down.

  1. Title Heading with number of items in dropdown - Small heading (Optional)
  2. Search text field extension

Scrollable

In most cases, the height of the dropdown is based on the amount of content contained within the dropdown. The exception to this rule is when the height of a dropdown would otherwise be taller than the visible space within the viewport. In this case, a scrollable dropdown should be utilized.

  1. Divider 
  1. Divider


Specs

Color

In the Alkami Platform, colors play a large role in helping users understand how to interact with the system. Following the Guidance and Affordance color paradigms, dropdowns can reinforce these mental models. When using a dropdown as a way for users to select from a list of actions, use affordance colors.  When using a dropdown as a way for users to navigate to another area of the app, use guidance colors.

Note: the Quick Action Button trigger colors are defined in the Quick Action Button doc.

Affordance colors

Element Property Values
Quick action trigger (static) Background color ∆colorPlatformWhite
Quick action trigger (static) Border ∆colorPlatformWhite
Quick action trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (hover) Background color ∆colorBrandedAffordance100
Quick action trigger (hover) Border ∆colorBrandedAffordance100
Quick action trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (pressed) Background color ∆colorBrandedAffordance
Quick action trigger (pressed) Border ∆colorBrandedAffordance100
Quick action trigger (pressed) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (selected) Background color ∆colorPlatformWhite
Quick action trigger (selected) Border ∆colorPlatformWhite
Quick action trigger (selected) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (static) Label text color ∆colorPlatformGray900
Label and icon trigger (static) Icon color ∆colorPlatformGray600
Label and icon trigger (static) Background color ∆colorPlatformAlpha0
Label and icon trigger (hover) Label text color ∆colorPlatformGray900
Label and icon trigger (hover) Icon color ∆colorPlatformGray600
Label and icon trigger (hover) Background color ∆colorBrandedAffordance100
Label and icon trigger (pressed) Label text color ∆colorPlatformGray900
Label and icon trigger (pressed) Icon color ∆colorPlatformGray600
Label and icon trigger (pressed) Background color ∆colorBrandedAffordance100
Label and icon trigger (selected) Label text color ∆colorPlatofmAlpha0
Label and icon trigger (selected) Icon color ∆colorPlatformGray600
Label and icon trigger (selected) Background color ∆colorPlatformAlpha0
Icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (static) Background color ∆colorPlatformAlpha0
Icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Background color ∆colorBrandedAffordance100
Icon trigger (pressed) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (pressed) Background color ∆colorBrandedAffordance100
Icon trigger (selected) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (selected) Background color ∆colorPlatformAlpha0
List item container (static) Background color ∆colorPlatformAlpha0
List item container (hover) Background color ∆colorBrandedAffordance100
List item container (pressed) Background color ∆colorBrandedAffordance100
List item container (selected) Background color ∆colorPlatformAlpha0
List item text (static, hover, pressed, selected) Text color ∆colorPlatformGray900
List item text (disabled) Text color ∆colorPlatformGray900
∆colorPlatformAlpha400
Second line item text (static, hover, pressed, selected) Text color ∆colorPlatformGray600
Second line item text (disabled) Text color ∆colorPlatformGray600
∆colorPlatformAlpha400
List item icon (static) Icon color ∆colorBrandedAffordanceAccessible
List item icon (hover) Icon color ∆colorBrandedAffordanceAccessible
List item icon (pressed) Icon color ∆colorBrandedAffordanceAccessible
List item icon (selected) Icon color ∆colorBrandedAffordanceAccessible
Selected item indicator (static) Icon color N/A
Selected item indicator (hover) Icon color N/A
Selected item indicator (pressed) Icon color ∆colorBrandedAffordanceAccessible
Selected item indicator (selected) Icon color ∆colorBrandedAffordanceAccessible
Badge Background color ∆colorBrandedAffordanceOn
Badge Text color ∆colorBrandedAffordanceOn
Search (Static) Text color ∆colorPlatformGray600
Search (Active) Text color ∆colorPlatformGray900
Search Icon color ∆colorPlatformGray600
Divder Background color ∆colorPlatformGray50
No Record Found Text color ∆colorPlatformGray600

Guidance colors

Element Property Values
List item container (static) Background color ∆colorPlatformAlpha0
List item container (hover) Background color ∆colorBrandedGuidance100
List item container (pressed) Background color ∆colorBrandedGuidance100
List item container (selected) Background color ∆colorPlatformAlpha0
List item text (static) Text color ∆colorPlatform900
List item text (hover) Text color ∆colorPlatform900
List item text (pressed) Text color ∆colorPlatformGray900
List item text (selected) Text color ∆colorPlatformGray900
List item icon (static) Icon color ∆colorPlatformGray600
List item icon (hover) Icon color ∆colorPlatformGray600
List item icon (pressed) Icon color ∆colorBrandedGuidanceAccessible
List item icon (selected) Icon color ∆colorBrandedGuidanceAccessible
Selected item indicator (static) Icon color N/A
Selected item indicator (static) Icon color N/A
Selected item indicator (static) Icon color ∆colorBrandedGuidanceAccessible
Selected item indicator (static) Icon color ∆colorBrandedGuidanceAccessible
Search (Static) Text color ∆colorPlatformGray600
Search (Active) Text color ∆colorPlatformGray900
Search Icon color ∆colorPlatformGray600
Divder Background color ∆colorPlatformGray50
No Record Found Text color ∆colorPlatformGray600

Elevation

Element Property Values
Dropdown raised surface Background color ∆surfacePlatformRaisedBackgroundColor
Dropdown raised surface Shadow color ∆surfacePlatformRaisedShadowColor
Dropdown raised surface Shadow y-offset ∆surfacePlatformRaisedShadowY
Dropdown raised surface Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Dropdown raised surface Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Dropdown raised surface Shadow spread ∆surfacePlatformRaisedShadowSpread

Spacing

Trigger spacing

Standard list item spacing


Slot spacing

Standard list item keyline spacing

All list items do not need to have a leading icon, but when mixing list items with and without leading icons, ensure labels always align to the keyline. This ensures that users can quickly scan the list items without the need to bounce back and forth due to some list items not having icons. Keylines also come in handy when list items wrap to multiple lines.

Checkmark container spacing

The checkmark will have its own container slot to make room for the checkmark. This is present at all times and will allow the content in the dropdown to not move around when selecting an item.

Checkmark selected spacing

Search within dropdown


No results found

The text is vertically aligned within the dropdown list item.



International phone number

The dropdown can be with or without the search functionality.


Bottom Sheet


Min/max

The width of list items should expand to fill the width of the parent container by default. If the parent container doesn’t make sense to snap to, or the available space is too small (<185px) or too large (>440px) to properly display the dropdown, the width is determined by the longest list item. Once the dropdown reaches 440px wide, the list items should wrap to the next line. 

Badges (used only with quick action button trigger) represent how many list items have been selected by the user. Usability when selecting multiple list items starts to take a hit when more than just a handful of selections are made. If a user may want to select more than 5 selection, consider using a different solution. A bottom sheet or side sheet could be a great place to list out a large group of chips that a user could add/remove one by one instead of tediously selecting from a dropdown (that could easily be cancelled inadvertently.

States

Labels and icons trigger

The following graphic show the states for both the icon only trigger, label and icon combo trigger, and the label and caret combo trigger.

Quick action trigger


Account list items


Standard list items

Bottom sheet list items



Theming

Color

Element Property Values
Quick action trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (hover) Background color ∆colorBrandedAffordance100
Quick action trigger (hover) Border ∆colorBrandedAffordance100
Quick action trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (pressed) Background color ∆colorBrandedAffordance100
Quick action trigger (pressed) Border ∆colorBrandedAffordance100
Quick action trigger (pressed) Icon color ∆colorBrandedAffordanceAccessible
Quick action trigger (selected) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (hover) Background color ∆colorBrandedAffordance100
Label and icon trigger (pressed) Icon color ∆colorBrandedAffordanceAccessible
Label and icon trigger (pressed) Background color ∆colorBrandedAffordance100
Label and icon trigger (selected) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (static) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (hover) Background color ∆colorBrandedAffordance100
Icon trigger (pressed) Icon color ∆colorBrandedAffordanceAccessible
Icon trigger (pressed) Background color ∆colorBrandedAffordance100
Icon trigger (selected) Icon color ∆colorBrandedAffordanceAccessible
List item container (hover) Background color ∆colorBrandedAffordance100
List item container (pressed) Background color ∆colorBrandedAffordance100
List item icon (static) Icon color ∆colorBrandedAffordanceAccessible
List item icon (hover) Icon color ∆colorBrandedAffordanceAccessible
List item icon (pressed) Icon color ∆colorBrandedAffordanceAccessible
List item icon (selected) Icon color ∆colorBrandedAffordanceAccessible
Selected item indicator (static) Icon color ∆colorBrandedAffordanceAccessible
Selected item indicator (static) Icon color ∆colorBrandedAffordanceAccessible

Elevation

No elevation properties are themable with the dropdown component.

Shape

Element Property Values
Dropdown container Large component ∆shapeBranded

Spacing

Element Property Values
Standard list item Margin top/bottom ∆spacingBranded
Accounts list item Margin top/bottom ∆shapeBranded

Type

No type is themable for the dropdown component.

Placement

The default placement of dropdowns should be immediately below the trigger (referred to as the flow down placement) and aligned along the left edge; but due to information density or scroll position, the dropdown can also appear above the trigger (referred to as the flow up placement), aligned along the right edge, or centered vertically or horizontally with the trigger.

  1. Flow down placement aligned along the left edge
  2. Flow down placement aligned along the right edge
  3. Flow up placement aligned along the right edge (but could also be left aligned)
  4. Flow up placement center aligned (could also follow the flow down placement)

Scrollable

In most cases, the height of the dropdown is based on the amount of content contained within the dropdown. The exception to this rule is when the height of a dropdown would otherwise be taller than the visible space within the viewport. In this case, a scrollable dropdown should be utilized.

Truncation

List items that contain account information can become truncated if there’s not enough horizontal space to display the full account nickname. See the account component for more details about truncation and priorities. Standard list items should never truncate, but wrap to another line. The title in the bottom sheet will wrap to two lines but truncate after that with enough room to have the counter at the end.


Behavior

Since dropdowns are always hidden by default, some amount of motion is needed when triggered so the user understands where the contextual content is originating.

Expand and collapse

Expand

When the trigger is tapped or clicked, the dropdown surface fades from 0% to 100% opacity and moves downward 4px into a resting position. In the case of a flow up placement, the surface will move upward 4px into a resting position.

Interaction Steps Duration Easing Notes Haptics
Expand 1a. Fade in ∆motionTimeFast ∆motionTimingFunctionStandard Fades in from 0–100% opacity  
  1b. Move from -∆platformSpacingNano ∆motionTimeFast ∆motionTimingFunctionStandard Moves from –∆platformSpacingNano into designed position (from +∆platformSpacingNano for a dropdown placed above the input)  
  1c. Scale in ∆motionTimeFast ∆motionTimingFunctionStandard Scale 96–100%. The scale’s origin point should be set on the side closest to the input.  

Collapse

When a dropdown is used for single-select, follow the guidelines below. When a dropdown is used for multi-select, the collapse should not happen automatically. Instead, the user may dismiss the dropdown by clicking outside of the surface or on the trigger object.

Interaction Steps Duration Easing Notes Haptics
Collapse 1. Dropdown selection delay ∆motionTimeFast   Delay before dismissing the dropdown surface  
  2a. Fade out ∆motionTimeFast ∆motionTimingFunctionStandard Fades out 100–0% opacity  
  2b. Move to -∆platformSpacingNano ∆motionTimeFast ∆motionTimingFunctionStandard Moves + or - ∆platformSpacingNano depending on placement  
  2c. Scale out ∆motionTimeFast ∆motionTimingFunctionStandard Scale 100–96% using the same origin point as the entrance  

Dropdown using caret

When using the label with caret combo trigger, the caret should rotate +180° upon opening and closing the dropdown — thus completing a circular movement. The dropdown opening motion is timed to sync with the rotating caret. The image below, while it’s showing an input field, the label with caret combo trigger caret behaves the same.

Typing in text field Suggestion extension

Clicking or tapping on the text field will bring it into a focus state and a dropdown with suggested list items will show. The user can type into the text field to narrow down the dropdown list items. Once selected, the dropdown will fade away and the text field will have the list item value inside of it.

Filter rules when using Search extension

Filter the results based on the string typed.  Any part of any visible text (not icons or images or meta data) that matches the typed string should be shown in the dropdown while all other items are removed (filtered out).  Any part of the dropdown items’ string values can be searched/filtered. For example, if a user clicked the search area in a list of US states then typed “te” the items remaining in the dropdown would be Tennessee and Texas. If they typed “na” the results would be Arizona, Indiana, Louisiana, Montana, North Carolina, and South Carolina. If the user types out a string that does not match any values in the dropdown, then a “no results found” text will be displayed.

If the user types in the field but does not select an item, the field will clear when the focus leaves the field empty. 

When using the Filter Dropdown with a dropdown containing the accounts component, filter on the account nickname and the unmasked portion of the account number. For example if the account Name was “My Checking” and the unmasked account numbers were “4567” this account would appear if tying any part of the string of either the name or the number. 

Interacting outside the dropdown

When tapping or clicking anywhere outside the dropdown surface, or pressing the Esc key,  the assumption is the user does not intend to interact with the dropdown content, and the dropdown is closed.

View scrolling

If the view is scrolled after opening a dropdown, the dropdown is left open and maintains the same position relative to its trigger while allowing the content underneath to continue scrolling. There is no need to adjust the size or position of the opened dropdown once scrolling begins.

Browser resize

The dropdown will be closed automatically if there is a browser resize event. There is no expectation that the dropdown position updates based on a browser resize event.

Developer Docs

Vue Developer Docs

Component documentation coming soon!