Dropdown selectors are used when a user can choose one of many preset values for a field.

Labels

All dropdown selectors should be clearly labeled. Since there is no built-in label for UISelectChildren another component must be used with it. Labels should be placed directly above or to the left of the dropdown selector.

Alternatives

When space is not constrained and there are few available options to select from, consider using a list with UIRadio buttons.

‍

1. Selected Value

The selected value is displayed as the primary element of the component. When no selection has been made, custom text appears in italics instead.

2. Dropdown Icon

An angle-down icon is displayed to the right of the selected value as an affordance for the dropdown interactivity.

3. Dropdown Menu

When the selected value or icon is clicked, a menu displays the selection options. This menu has an optional text filter space to ease selection from very long lists of options.

4. Selection Option

Each option that can be selected appears as a row in a vertical list within the dropdown menu.

‍

Dropdown selectors are interactive components that allow for the display and selection of a value.

Clickable Area

All of a UISelectChildren component is clickable and triggers the opening of the dropdown menu in which a selection can be made.

Making a Selection

Clicking any item in the dropdown menu will replace the selected value with the clicked value. Clicking the currently selected value closes the menu, but does not change the selection.

‍