07.4 / Dropdowns

07.4 / Dropdowns
Dropdowns A dropdown list is a user interface control element, similar to a list box, which allows the user to choose one value from a list. When a dropdown list is inactive, it displays a single value. When activated, it displays a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.
Primary dropdown – field with predictive text
Primary dropdown – field with stepper
Primary dropdown – field with scroller
The primary dropdown is set to make predictions and auto-fill the field based on your previous searches. Once a traveler begins typing, the system will automatically predict what the user is imputing and list previously used information. If there are no previous entries, there will be no auto-fill within the field. The field stepper allows the user to interact will multiple selections without having to leave a single field. The plus and minus allow the traveler to either add or subtract specific values to reach the desired result in their search.
Dropdowns A dropdown list is a user interface control element, similar to a list box, which allows the user to choose one value from a list. When a dropdown list is inactive, it displays a single value. When activated, it displays a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.
Secondary dropdown – text link
Secondary dropdown – text link with scroller
Dropdowns A dropdown list is a user interface control element, similar to a list box, which allows the user to choose one value from a list. When a dropdown list is inactive, it displays a single value. When activated, it displays a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.
Link overlay with stepper
Link overlay with radio buttons
Scroll bar A scroll bar provides the user the means to view multiple options and scenarios within a limited space without having to leave the targeted area.
Secondary dropdown – Field with scroller
Secondary dropdown – text link with scroller
Secondary dropdown – field with stepper
Text Fields Text entry boxes are text fields into which users can either enter, add or change information relevant to their needs. When in the inactive state the text field color will be hex #E6E6E6. When in the active state, the field will be hex #FFFFFF (white) for better legibility and to show separation.
Large fields – white, gold, gray backgrounds
Large fields – light and dark blue
Small fields – white, gold, gray backgrounds
Small – light and dark blue
Once a traveler begins typing and activates the field, the text input label turns from #666666 (label default state) to #333333 (active text color).
Available Assets Use the links below to access the available files for the assets referenced on this page.