React Responsive Combo Box
Edit page
IntroductionGetting StartedPropsUsageDemo

Props

Name of the PropType of the propDefaultUsage
optionsArrayRenders options in the combo box
placeholderStringSets the placeholder for the combo box
defaultIndexnumber-1Sets the default value for the given index.
highlightColorString#C6F6D5Changes the highlighted colour of the selected option
selectedOptionColorString#68D391Changes the highlighted colour of the selected option
classNameStringClass-name for options in the list.
inputClassNameStringClass-name for the input element.
wrapperClassNameStringClass-name for the outermost wrapping div.
listClassNameStringClass-name for the list of options.
popoverClassNameStringClass-name for the popover.
onChangeFunctionInvoked every time the user changes the input's value.
onSelectFunctionInvoked when the user selects any option from the list of options.
onOptionsChangeFunctionInvoked when the options are changed using down or up key.
optionsListMaxHeightnumber200Sets the maximum height of the options list container.
renderOptionsFunctionThis is a callback function which is used to render the options as you wish. Checkout the example how to use this prop.
enableAutocompleteBooleanfalse Enables the autocomplete feature in the combo box.
styleCSS PropertiesThis prop is used to style the combo box.
inputStylesCSS PropertiesThis prop is used to style the input component in the combo box.
onBlurFunctionInvoked when the combo box is blurred.
EditableBooleantrueYou can make the combo-box as non-editable by setting this prop to false.
renderLeftElementFunctionYou can add left element for the combo-box
renderRightElementFunctionYou can add right element for the combo-box

Usage

Example-1

  • This is the example for the props - options , placeholder and defaultIndex

  • options is the required prop to be passed to the combo-box.

import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        placeholder='Enter your country'
        defaultIndex={1}
      />
    </div>
  )
}

Example-2

  • This is the example for props - wrapperClassName, listClassname, popoverClassName, inputClassName, className, style, highlightColor and selectedOptionColor.
.Combo-box {
  width:'300px'
  height:'80px'
}
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
import './index.css'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        className='combo-box-option'
        wrapperClassName='combo-box-wrapper'
        inputClassName='combo-box-input'
        popoverClassName='combo-box-popover'
        listClassName='combo-box-list'
        style={{ margin: '10px' }}
        hightlighColor='#C6F6D5'
        selectedOptionColor='#68D391'
      />
    </div>
  )
}

Example-3

  • This is example for the props - onChange, onSelect and onOptionsChange
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
const App = () => {
  const [selectedOption, setSelectedOption] = useState('')
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        onChange={(event) => console.log(event.target.value)}
        onSelect={(option) => setSelectedOption(option)}
        onOptionsChange={(option) => console.log(option)}
      />
      <p>The selected option is {selectedOption}</p>
    </div>
  )
}

Example-4

  • This is example for the props - optionsListMaxHeight, renderOptions and enableAutocomplete
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        optionsMaxHeight={500}
        renderOptions={(option) => (
          <div style={{ padding: '10px' }}>This is {option}</div>
        )}
        enableAutocomplete
      />
    </div>
  )
}

Example-5

  • This is example for the props - style and inputStyles
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        style={{ width: '500px', margin: '30px' }}
        inputStyles={{ border: '1px solid #333' }}
      />
    </div>
  )
}

Example-6

  • This is example for the props - onBlur and editable
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        editable={false}
        onBlur={() => console.log('The component is blurred')}
      />
    </div>
  )
}

Example-7

  • This is example for the props - renderLeftElement and renderRightElement
import React, { useState } from 'react'
import ComboBox from 'react-responsive-combo-box'
import 'react-responsive-combo-box/dist/index.css'
import { AiFillCaretDown, AiFillFilter } from 'react-icons/ai'
const App = () => {
  const options = [
    'America',
    'India',
    'Australia',
    'Argentina',
    'Ireland',
    'Indonesia',
    'Iceland',
    'Japan'
  ]
  return (
    <div>
      <ComboBox
        options={options}
        renderRightElement={()=> <AiFillCaretDown /> }
        renderLeftElement={()=> <AiFillFilter /> }
      />
    </div>
  )
}