# Code
## Props
| Props | Data Type | Required |
|---|
| label | string | ❌ |
| info | string | ❌ |
| name | string | ❌ |
| placeholder | string | ❌ |
| id | string | ✅ |
| value | string | ✅ |
| children | -HTML tags
-Custom Components
(MenuOption, MenuHeader and MenuDivider) | ✅ |
| search | boolean | ❌ |
| helptext | string | ❌ |
| readOnly | boolean | ❌ |
| error | boolean | ❌ |
| errorMessage | string | ❌ |
| disabled | boolean | ❌ |
| autoposition | boolean | ❌ |
| showVisuals | boolean | ❌ |
| checkSelectedItems | boolean | ❌ |
| removeSelectedItems | boolean | ❌ |
| onChange | function event | ❌ |
{% hint style="info" %}
The properties marked with a **?** are optionals.
{% endhint %}
### Functionality and Internal Structure
This form control is going to be structured using the same children components implemented in the [Menu](https://2600hz.gitbook.io/sds/sds-components/simple-components/menu) component, replicating the logic and flexibility at creating options for the dropdown menu. The only difference, is that this component already has a toggle feature that allows to open or close the menu, at the same time it reflects the select item, replacing the original `placeholder` prop value.
->
### autoposition
This feature allows developers to not worry about the correct location of the `Menu` or `MenuBox` component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.
### showVisuals
In case there were used avatars or icons at creating options for the dropdown menu, `showVisuals` will allow the component to display them also on the input box of the dropdown component at the moment selecting one of the items on the menu. By default, this feature is not active on the Dropdown component.
### removeSelectedItem
Once an item has been clicked and selected, it will be removed from the list.
### checkSelectedItem
Once an item has been clicked and selected, it will show a darker background as a visual indicator.
### Event Response
| Property | Data Type |
| -------------------------------------------------------------------------------------------------------------------------- | --------- |
| id | string |
| name | string |
| label | string |
| value | string |
| description
(This property will appear only if the description prop exists in the MenuOption component)
| string |
### OnChange
```jsx
import React, {useState} from 'react';
import {Dropdown, MenuOption, MenuDivider, Menuheader} from '@2600hz/sds-react-components';
const Example = ()=>{
const [selectedItem, setSeletedItem] = useState('');
const updateState = (e)=>{
setSelectedItem(e.value);
}
return(
Element 1
Element 2
Element 3
Element 4
)
}
```
## Components Dependency
For this component elaboration, there were used the following internal components:
* [Label](https://2600hz.gitbook.io/sds/sds-components/form-controls/label)
* [Menu](https://2600hz.gitbook.io/sds/sds-components/simple-components/menu)
* Menu Header
* Menu Divider
* [Menu Option](https://2600hz.gitbook.io/sds/sds-components/form-controls/dropdown/broken-reference)
* [Avatar](https://2600hz.gitbook.io/sds/sds-components/simple-components/avatar)
* [Telicon](https://2600hz.gitbook.io/sds/sds-components/simple-components/telicon)
## Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
### React
{% embed url="" %}