Components
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.
Appropriate component for the task
Consider your options when choosing what tool to use.
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.
- Label
- Placeholder/ Title
- Frame
- Icon - Menu-down / Menu-up
- Error message
- 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.