Code

Props

Props	Data Type	Required
defaultValue	string	❌
className	string	❌
id	string	✅
name	string	✅
placeholder	string	❌
disabled	boolean	❌
onBlur	function event	❌
onChange	function event	❌
onFocus	function event	❌
cleanData	function event	❌

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.

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

• Telicon

Live Demo

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

React

https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fform-controls-search--searchsipster-react-component-storybook.netlify.app