---
# System prepended metadata

title: Search fields
tags: [DS DONE]

---

---
tags: DS DONE
---


# Search fields
Search allows users to specify a word or a phrase to find relevant result without the use of navigation.

# Usage 
## Types
Search fields exist for our light and dark themes.

![](https://i.imgur.com/Z6zyVHW.jpg)


1. **Basic search**
When a search is static, this option allows the users to type in its request and hit the search button in order to submit the search request. 
2. **As-you-type suggestion search**
If you wish to offer suggestions to the user (e.g. fuzzy, elactic or autocomplete searches), this option is very handy and enables dynamic results. 



## Basic search
![](https://i.imgur.com/HAiTQ2d.jpg)


### States and anatomy
For all field states and anatomy info, please refer to the [text field component](https://)


## As-you-type suggestion search


![](https://i.imgur.com/mxnMMIz.jpg)


### States
>[name=Arnaud]Comment tout ca va marcher en accessibility? 

![](https://i.imgur.com/g8nbwr1.jpg)


1. **Text field state**
For all text field states, please refer to the [text field component](https://)
2. **Suggestion panel**
The suggestion panel is opened when the text field is active/focused
2. **Suggestion hover**
TBD

### Anatomy

![](https://i.imgur.com/I2pst5W.jpg)

1. **Text field** with his own elements: action icon, clear icon,... [more info about text field](https://)
2. **Search for the input**
If the user wish to search for the specific string he entered, this first item of the list will act as the submit button. It differs from the rest of the elements in the list by its color and the magnifying glass icon
3. **Suggestion panel**
The suggestion panel open when the user start typing, this panel contains all the the items that the system found.
4. **Suggestion items**
Each suggestion item within the list is a clickable element that triggers the search with the specific element clicked.


---

## Styles

### Sizes

![](https://i.imgur.com/kbDaxg3.jpg)


|  | Attribute | Mobile | Tablet/Desktop |
| -------- | -------- | -------- | -------- |
| 1. Text field     | Refer to the style tabs on the [text field component](https://) article     |      |      |
| 2. Spacing     | Between text field and suggestion panel     | 0.2rem     |      |
| 3. Search for     | Font weight <br> Font size    | Regular <br> Size 4     |      |
| 4. Magnifying glass icon     |      | 16 x 16px     |  -    |
| 5. Suggestion     | Font weight <br> Font size    | Regular <br> Size 4     |  -    |
| 6. User research on the sugesstion     | Font weight <br> Font size    | Bold <br> Size 4     |  -    |
| 7. Suggestion padding     | Top <br> Right <br> Bottom <br> Left     | 1rem <br> 2rem <br> 1rem <br>2rem     |  -    |
| 8. Rounded corner     |      | 5px     |  -    |


### Colors

#### Light theme

![](https://i.imgur.com/Qiru7Po.jpg)


|  | Attribute | Value |
| -------- | -------- | -------- |
| 1. Text field     | Refer to the style tabs on the [text field component](https://) article     |      |
| 2. Magnifying glass icon      | Color     |   Purple   |
| 3. "Search for" call to action      | Background color     |   Grey3   |
| 4. Suggestion text      | Font color     |   Body text color   |
| 5. Suggestion panel      | Background color     |   Grey1   |
| 2. Suggestion hover     | Text color <br> Background color|   Purple <br> Purple2    |


#### Dark theme

![](https://i.imgur.com/zAFebb9.jpg)

|  | Attribute | Value |
| -------- | -------- | -------- |
| 1. Text field     | Refer to the style tabs on the [text field component](https://) article     |      |
| 2. Magnifying glass icon      | Color     |   White   |
| 3. "Search for" call to action      | Background color     |   White 20% opacity   |
| 4. Suggestion text      | Font color     |   White   |
| 5. Suggestion panel      | Background color     |   White 20% opacity on a purple or black full background color*  |
| 2. Suggestion hover     | Text color <br> Background color|   Black <br> White 40% opacity    |

*depending of the background behind your search field, it is necessary to apply these opcity colors on a full purple or black background. 