---
# System prepended metadata

title: Select
tags: [DS DONE]

---

---
tags: DS DONE
---


# Select
Select element presents a menu of options.

# Usage
Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.


#### Select versus Dropdown
While the select and dropdown components look similar, they have different functions.

* Use the select component inside a form where users are selecting from a list of options and submitting data.
* Use the dropdown component to filter or sort content on a page.

Another important difference between the two components is the underlying code. The select component’s appearance will be determined by the browser being used, while the dropdown component can be styled as needed.

For more info about the dropdow, consider reading the [dropdown component article](https://)

## Types

There is one type of dropdown menus, available for our different themes:

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


Select can be used both in dark an light theme.

## State

> [INFO BOX] For input fields states info, please refer to the [text field article](https://).

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


1. **Basic state**
State visible before click. Field and label are displayed, and chevron pointing to the bottom. No user input yet.
2. **Opened**
State triggered by keyboard navigation or click. The modal menu opens, allowing the user to select an option. Container is outlined to help the user identify the field state and chevron is changing its direction to point to the top.
3. **Filled state**
State visible when the user has done his selection. Container and input are visible. 


## Anatomy

> [INFO BOX] For input fields anatomy info, please refer to the [text field article](https://).

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


1. **Select container**
A select field displays with a pointing down chevron indicates the type of action required by the user. Refer to the [text field article](https://) to have more info.
2. **Options list**
The options list contains all the available options. Select usess the native behaviour from the browser, thus the design might slightly change from a browser to another.
3. **Chevron**
Chevron informs the user about the possible interaction with the field and its state. Pointing down, the options are hidden. Pointing up, the options are displayed.
4. **Option label**
Option label indicates the option/choice that will be selected when clicked. Try to be as concise as possible.

> [INFO BOX] **Select native**
> - Native behaviour only allow to display text within the select field. 
> - When user is prompted to choose form a larger set of options, consider grouping the options.


## Interaction
The modal menu appears on click on the field and should be displayed above all other UI elements. They can be dismissed by clicking outside of the modal menu item or on the select field itself.

The select, like the text field, displays the selected option as input content in the field when the user has selected it in the modal menu. 



---

## Styles

> [INFO BOX] For all select text field sizes and colors info, please refer to the [text field article](https://).

No UI specification for the modal menu itself since it's a select native from the browser. 
