Using this Component
Dropdown selectors are used when a user can choose one of many preset values for a field.
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.
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.
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.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.