# Format

### Props

<table><thead><tr><th>Props</th><th width="380.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>MenuOPtion Component</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>id</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>name</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>label</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>info</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>placeholder</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>defaultValue</td><td><p>Array<br>[ { </p><p>  value: string; </p><p>  text: string; </p><p>  avatar?: { </p><p>      username: string; </p><p>      profilePic?: string; </p><p>   }; </p><p>} ]</p></td><td></td></tr><tr><td>search</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>helptext</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>error</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>errorMessage</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>disabled</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onClick</td><td>function event</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### Event Response

| Property | Data Type                                                                                                                        |
| -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| array    | <p>[{</p><p>  avatar: string,</p><p>  id: string,</p><p>  name: string,</p><p>  text: string,</p><p>  value: string</p><p>}]</p> |

## Components Dependency

For this component elaboration, there were used the following internal components:

* MenuOption
* [Tag](../../simple-components/tag)
* [Telicon](../../simple-components/telicon)
* [Label](../label)
* [Search](../search)

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

### React

{% embed url="https://sipster-react-component-storybook.netlify.app/?path=/story/form-controls-multi-select--multi-select" %}
