# Code

## Props

| Props        | Data Type      | Required             |
| ------------ | -------------- | -------------------- |
| defaultValue | string         | :x:                  |
| className    | string         | :x:                  |
| id           | string         | :white\_check\_mark: |
| name         | string         | :white\_check\_mark: |
| placeholder  | string         | :x:                  |
| disabled     | boolean        | :x:                  |
| onBlur       | function event | :x:                  |
| onChange     | function event | :x:                  |
| onFocus      | function event | :x:                  |
| cleanData    | function event | :x:                  |

### Event Response

| Property | Data Type |
| -------- | --------- |
| id       | string    |
| name     | string    |
| value    | string    |

### onBlur, onChange, onFocus

For this example it is going to be use the onChange event, but the same logic can be applied to the other events.

```jsx
import React, {useState} from 'react';
import {Search} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [search, setSearch] = useState('');
    
    const updateState = (e)=>{
        setSelectedItem(e.value);
    }
    
    return(
        <div className='container'>
            <Search id='search' onChange={updateState} />
        </div>
    )
}
```

## Components Dependency

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

* [Label](../label)
* [Telicon](../../simple-components/telicon)

## 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=%2Fstory%2Fform-controls-search--search" %}
