Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Dropdown

Dropdowns are interactive controls that display a list of selectable options.

Status: In progress

Anatomy

The dropdown component consists of an input component and menu component. As such, it inherits much of their base functionality with a few additional opinions specific to the dropdown.

  1. Left icon
  2. Label
  3. Prefix
  4. Input text
  5. Container
  6. Dropdown icon
  7. Activation indicator
  8. Menu
  9. Required indicator
  10. Helper text

Variants

Appearance

Outline (Default)

Use the outline appearance when the dropdown will be used among several other inputs such as detailed form layouts to reduce visual busyness.

Fill

Filled dropdowns can be used to provide additional visual emphasis.

Be careful when using the fill appearance; consider using them when only a few are being used and the dropdown needs to stand out from surrounding content.

Left icon

A user-customizable icon can be included to describe the type of dropdown, such as a date picker. Note that the right icon is permanently set and cannot be customized.

Compact

Compact dropdowns have a reduced height and are best used in forms with a high number of form elements or in contexts that require more conservative vertical spacing.

Note that only the dropdown container height is reduced; the menu items retain their original size.

Label

Every dropdown should have a label. Keep labels concise and clear and do not wrap to multiple lines.

Floating (Default)

Floating labels are used in place of placeholder text. They start in the middle of the dropdown (in the position of placeholder text) and transition to the top when the dropdown is selected. If the dropdown content is cleared, the label returns to the placeholder position.

Fixed

Fixed labels are always present at the top of the dropdown. Placeholder text can also be included to provide additional guidance on what can be selected from the dropdown menu.

None

Labels are not required if an adjacent label is included that adequately describes the purpose of the dropdown and is correctly referenced to the field for accessibility purposes. Placeholder text can also be included.

Prefix

A prefix can be used to denote a currency type.

Helper text

Helper text conveys additional information about the dropdown, such as requirements or character counts. When a dropdown selection is invalid, an error message replaces the helper text and is displayed until the error is fixed.

Required indicator

Form elements can be marked as either required or optional.

Required

Required form elements are used when the majority of the form elements are optional, but a few need to be marked as required.

Optional

Optional form elements are used when the majority of the form elements are required, but a few elements need to be marked as optional.

Behavior

Trigger

A dropdown is triggered by clicking or tapping anywhere within the dropdown container. Once triggered, a menu is exposed revealing the available options for that dropdown. After an option has been selected, the input text within the dropdown container updates to reflect the selection made. A dropdown can be closed by clicking anywhere outside the revealed menu, including the dropdown container itself.

Inactive
Activated
Populated inactive
  1. Inactive
  2. Activated
  3. Populated inactive

Menu height

  • By default, a dropdown menu will show the entire list of items within the menu.
  • A height property can be adjusted to control how many items can be displayed before a scrollbar appears to handle the overflow.

Multiple selections

By default, a user can only select one item at a time. However, dropdowns can be set to allow users to make multiple selections dropdown menu. Selections are displayed as a comma-separated string within the input field and cropped with an ellipsis when they extend beyond the edge of the dropdown.

A clear button is displayed at the bottom of the menu so the user can easily deselect all selected items.

Menu placement and scale

By default, menus appear immediately below the dropdown container with no space in between. When activated, the menu always sits above any helper text that’s present. The menu width should always match that of its corresponding dropdown container.

Menus should anchor to the top of the dropdown container and expand upward if the dropdown is near the bottom of the viewport and doesn’t have enough room to fully expand.

Overflow

If the viewport is not tall enough to accommodate the entire menu, the menu should shrink to just within the viewport and display a scrollbar. The menu defaults to the bottom placement, but will switch to the top placement if that affords more of the menu to be displayed.

Keyboard interactions

When part of a dropdown, the default menu keyboard interactions are overridden as follows:

Key Interaction
Tab Tabbing onto the dropdown focuses the input of the dropdown. Once the menu is open, Tab takes you to the next interactive element in the DOM flow.
Return Pressing the Return key opens the dropdown menu. When a user has highlighted a menu item, Return selects or deselects it.
Up arrow or Down arrow Pressing the Up arrow or Down arrow cycles through the menu options.
Esc Pressing Esc while a dropdown is open closes the dropdown and retains focus on the dropdown input.

Closing

Single-selection dropdowns close once a menu item has been selected or anywhere outside the dropdown (as well as the input itself) is clicked.

Multi-select dropdowns will stay open until the user clicks the input or outside the dropdown.

States

By default, the input within the dropdown is set to read-only.

Floating label

Inactive
Focus
Hover
Active
Populated active
Populated inactive
Disabled
Populated disabled
Error inactive
Error focus
Error active

Fixed label

Inactive
Focus
Hover
Active
Populated active
Populated inactive
Disabled
Populated disabled
Error inactive
Error focus
Error active

No label

Inactive
Focus
Hover
Active
Populated active
Populated inactive
Disabled
Populated disabled
Error inactive
Error focus
Error active