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).
