Search / Autocomplete
Overview
Definition
A text input where people specify a word, name, or phrase and select an option without having to navigate to another place.
Similar or related Components
Guidelines
The best time to use this is when there is a lot of information for someone to pull from, and they know what they are looking for.
Most commonly used to look up:
- Doctor / provider
- Prescription
- Carrier name
- Customer name or ID
Don’t use Search when there are only a few options to choose from, or if someone does not know what they are looking for.
Content
- Most of the dropdown content comes from multiple external sources, we will not always be able to change what shows up for people.
- We can change what the label says and its size, when needed.
Visuals
Do
Keep the remaining letters/figures the same weight as the input (500) and the matching as 300 weight. This way people see what’s left at a glance a little easier.
Do
You can add different icons to the group lists, just make sure they are not taking away from the main purpose.
Don’t
Don’t change the colors of the icons or hover.
Specs
Basic field
The label
| Label size | body-large-300 | |||
| Label color | $ink-600 | |||
| Label padding-bottom | spacing-03 | |||
The input field
| Default | Hover | Active | Disabled | Error | |
|---|---|---|---|---|---|
| Background color | – | $ink-100 | – | ||
| Border radius | border-radius-sm | ||||
| Border color | $ink-300 | $blue-800 | $ink-800 | $ink-300 | $red-600 |
| Padding | Spacing-03 spacing-03 spacing-03 spacing-04 | ||||
| Icon size | spacing-05 | ||||
| Icon color | $ink-600 | ||||
| Icon padding-left | spacing-02 | ||||
| Input text size | body-medium-500 | ||||
| Input text color | $ink-800 | $ink-400 | $ink-800 | ||
The dropdown group specs
| Margin top | spacing-01 | |||
| Border radius | border-radius-small | |||
| Padding | spacing-02 | |||
| Dropshadow | shadow-200 | |||
| List spacing | spacing-00 | |||
The dropdown list item
Basic list item
| Default | Hover | Active | Disabled | |
|---|---|---|---|---|
| Background color | $white | $blue-200 | $white | |
| Border radius | border-radius-xsmall | |||
| Padding | spacing-02 | |||
| Title size | body-medium-500 | |||
| Title color | $ink-800 | $ink-400 | ||
Doctor list (basic list and these additional specs)
| Default | Hover | Active | Disabled | |
|---|---|---|---|---|
| Icon size | 24 px | |||
| Icon color | $blue-800 | $ink-400 | ||
| Icon padding right | spacing-03 | |||
| Title padding-bottom | spacing-00 | |||
| Helper text size | body-small-300 | |||
| Helper text color | $ink-600 | |||
Prescription list
| Default | Hover | Active | Disabled | |
|---|---|---|---|---|
| Title padding-right | spacing-02 | |||
| Helper text size | body-small-300 | |||
| Helper text color | $ink-600 | $ink-400 | ||
Accessibility
- The button should be controllable with keyboard and other assistive technology.
- The information within the hidden view should have the correct contrast.