Prop	Type	Default	Notes
variant	string	large	Defines the size. Can be `small` or `large`
value	string	N/A	Required prop
placeholder	string	N/A	Defines hint text
className	string	N/A	Defines a className for the component
isInputVisible	boolean	true	Defines if component is hidden or visible
isSuggestOpened	boolean	false	Defines if search suggest field is opened
hasBackground	boolean	false	Defines styles for element when displayed on colored background
onChange	function	N/A	Required prop. Change handler
onFocus	function	N/A	Function is called when search is focused
onBlur	function	N/A	Function is called when search loses focus
searchIconSelect	function	N/A	Function is called when user clicks serach icon button
clearText	function	N/A	Function is called when user clicks clear icon button
cancelCallback	function	N/A	Function is called when user clicks 'Cancel' button on mobile
searchBtnAreaLabel	string	N/A	Defines the `aria-label` attribute for serach icon button
clearBtnAreaLabel	string	N/A	Defines the `aria-label` attribute for clear icon button
cancelBtnAreaLabel	string	N/A	Defines the `aria-label` attribute for 'Cancel' button on mobile

Search Box - 36px Height

Default

Code

<div>
  <SearchComponent
    onChange={onChange}
    placeholder='Hint text here..'
    value=''
    variant='small'
   />
</div>

Search Box - 44px Height

Default

Code

<div>
  <SearchComponent
    onChange={onChange}
    placeholder='Hint text here..'
    value=''
   />
</div>

Search Suggest - 36px Height

Default

Give number for suggestions

Code

<DeviceSizeProvider>
  <DisplayFor
    large
    medium
    xLarge
  >
    <div style={{"position":"relative"}}>
      <SearchComponent
        onChange={onChange}
        placeholder='Hint text here..'
        value=''
        variant='small'
       />
      <SearchSuggest>
        Give number for suggestions
      </SearchSuggest>
    </div>
  </DisplayFor>
  <DisplayFor small>
    <SearchInputMobile
      onChange={onChange}
      placeholder='Hint text here..'
      value=''
      variant='small'
     />
    <SearchSuggest>
      Give number for suggestions
    </SearchSuggest>
  </DisplayFor>
</DeviceSizeProvider>

Search Suggest - 44px Height

Default

Give number for suggestions

Code

<DeviceSizeProvider>
  <DisplayFor
    large
    medium
    xLarge
  >
    <div style={{"position":"relative"}}>
      <SearchComponent
        onChange={onChange}
        placeholder='Hint text here..'
        value=''
       />
      <SearchSuggest>
        Give number for suggestions
      </SearchSuggest>
    </div>
  </DisplayFor>
  <DisplayFor small>
    <SearchInputMobile
      onChange={onChange}
      placeholder='Hint text here..'
      value=''
      variant='large'
     />
    <SearchSuggest>
      Give number for suggestions
    </SearchSuggest>
  </DisplayFor>
</DeviceSizeProvider>

Search Icon - 36px Height

Default

Code

<div>
  <SearchComponent
    iconOnly
    onChange={onChange}
    placeholder='Hint text here..'
    value=''
    variant='small'
   />
</div>

Search Icon - 44px Height

Default

Code

<div>
  <SearchComponent
    iconOnly
    onChange={onChange}
    placeholder='Hint text here..'
    value=''
   />
</div>

Helpful Links

Portfolio

Partners