Dropdown

Dropdown allows for a space efficient way for the user to select one option from a predetermined list. Dropdown utilizes a custom menu with support for graphics to display the list of options.

Interactive demo

This demo lets you preview the Dropdown component and its variations.

<ControlGroup className="dropdown_dropdown__UTXAA">
  <SelectItem
    onSelect={function noRefCheck() {}}
    selectLabel="Pick an item"
    v2
  >
    <DropdownItem name="Wallet">
      <Icon icon="balance" />
      <Label>
        Wallet
      </Label>
    </DropdownItem>
    <DropdownItem name="Clock">
      <Icon icon="clock" />
      <Label>
        Clock
      </Label>
    </DropdownItem>
    <DropdownItem name="BankAccount">
      <Icon icon="bank-account" />
      <Label>
        Bank account
      </Label>
    </DropdownItem>
    <DropdownItem name="Robot">
      <Icon icon="chat-robot" />
      <Label>
        Robot
      </Label>
    </DropdownItem>
  </SelectItem>
</ControlGroup>

Usage

Dropdown is suitable for handling a longer list of options for the user to pick from. Only one option may be chosen by the user. Options can be presented either as a text supported by an icon, or as an image (usually a logotype).

Alternatives for selection control

If the number of available options is short, a set of radio buttons or radio pills may be preferable, having the added benefit of being able to display all available options simultaneously. If the available options are simply yes/no or on/off, a checkbox is likely a better alternative. If the list of options can be presented solely as text entries, the sister component Select can be used as an alternative, which employs the native menu picker of the user device.

Radio pill

A set of radio pills allows the user to select one of multiple options.

Checkbox

A checkbox may be a better option for an on/off-switch.

Select

Select presents the list of options in text with the native menu picker of the user device.

Appropriate component for the task

Consider your options when choosing what tool to use.

Do

Choose the best suited tool for the task.

Don't

Use Dropdown when more suitable components are available.

Formatting

Anatomy

Select consists of a frame containing a title text and an icon indicating the current state of the component. A label is attached above the frame, and an error message can be displayed when required.

1. Label
2. Placeholder/ Title
3. Frame
4. Icon - Menu-down / Menu-up
5. Error message
6. Expanded menu

Label

The label should inform the user what choice is to be made.

Placeholder / title

Displays the currently selected option, or a prompt for the user to pick an option . Can be displayed as an icon along with a text, or solely a graphical element (usually a logotype)

Frame

A frame containing the selected option or prompt for the user. Unlike Select and Text-input, the background of the frame is opaque white.

Icon

An icon indicating the collapsed / expanded state of the component.

Error message

The error message informs the user of an error with the selected option. Ideally the user should not be presented with an invalid option from the menu list, but in some cases this may be unavoidable as a result of compound configuration in a form.he error message informs the user of an error with the selected option. Ideally the user should not be presented with an invalid option from the menu list, but in some cases this may be unavoidable as a result of compound configuration in a form.

Expanded menu

The list of options available for the user to pick from, presented the same way as the placeholder / title frame.

Behavior

States

Dropdown has two states: collapsed and expanded. The up/down arrow icon indicates the current state.

Collapsed

Expanded

Menu

Dropdown utilizes a custom menu with support for graphics to display the list of options. Be aware that the expanded menu may cover content on the page below the position of the component.

Modify

Dropdown can be extended or contracted horizontally as desired but usually expands to the horizontal edges of the surrounding frame. If shortened, be mindful of keeping enough space to fully display contents without cutoffs.

Disabled options

If desired an option or several may be presented as unavailable but still visible to the user.

Disabled

Dropdown may be presented in a disabled state in situations where the user should not be able to interact with the component.