import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Components/Atoms/Dropdown"/>

# Dropdown

  
Dropdowns are common components used in forms that let a user choose one option from a predefined list of options. For selecting multiple options, use checkboxes.
  
  

## What’s Inside

<br/><br/>
  

 <img alt="example of dropdown anatomy" src="./images/Molecules-Dropdown-Anatomy.png" width="400" />
 
<br/>
  


1- **Label** - A text label should be used to help communicate the intended input of the field.
    
2- **Required Indicator** - Turn on this option when a field is required to be filled before submission.    

3- **Placeholder** - Provides additional context to the nature of the indented input, should never be used in place of a label. Then are often used to provide an example of the type of input needed. (i.e. [me@email.com](mailto:my@email.com) for an email field)

4- **Down Arrow** - This necessary icon denotes the field to the user as a dropdown, affording its use.
  
  <br/>


## States

#### **Default**
In this state, the user hasn’t yet interacted with the input, but it's prepped and ready to accept input.
 <img alt="example of default dropdown" src="./images/Molecules-Dropdown-DefaultState.png" width="300" />
<br/><br/>

#### **Active**
Outline the container with the stroke of an accent color to indicate when a user is focused on an element. The menu displays overtop the the element using the users default system styling.
 <img alt="example of active dropdown" src="./images/Molecules-Dropdown-ActiveState.png" width="300" />
<br/><br/>

#### **Required**  
If a form element is required, an asterisk should be injected before the input label, colored with the brand’s accent color for error.
 <img alt="example of required dropdown" src="./images/Molecules-Dropdown-RequiredState.png" width="300" />
  <br/><br/>


#### **Error**
If an error occurred when submitting, the form element with an error should provide feedback with changed container stroke and text, usings the brand’s accent color for error.
 <img alt="example of error dropdown" src="./images/Molecules-Dropdown-ErrorState.png" width="300" />
  <br/><br/>

#### **Disabled**
Use when input is not yet possible. Use a brand utility colors for text and stroke.
 <img alt="example of diabled dropdown" src="./images/Molecules-Dropdown-DisabledState.png" width="300" />

  <br/><br/>

  
  
 
  

## Accessibility

Like Text Inputs, Dropdowns, should clearly indicate the purpose of the input.


Dropdown components should have a matching `<label>` to them.


Add `aria-required` for required inputs.

  
If the dropdown is not enclosed within the label tag, then labels must have the for attribute matching the ID of the textarea, like `<input id="unique-id-of-input"/>`. This practice ensures that screen readers inform users correctly about what information to enter where.