React Select Search

⚡️ Lightweight select component for React
Alternatives To React Select Search
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
30 Seconds Of Code115,786936 hours ago11December 05, 201813cc-by-4.0JavaScript
Short code snippets for all your development needs
Router5,147133 days ago15March 21, 202226mitTypeScript
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
30 Seconds Of React4,842
5 months ago1cc-by-4.0JavaScript
Short React code snippets for all your development needs
Reactivesearch4,82492219 days ago406August 06, 2023160apache-2.0JavaScript
Search UI components for React and Vue
Searchkit4,6501431621 days ago114July 15, 202325apache-2.0TypeScript
Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components. React & Vue support
Docsearch3,5892,3415352 days ago55August 21, 201986mitTypeScript
:blue_book: The easiest way to add search to your documentation.
Instantsearch3,3752411052 days ago92July 25, 2023121mitTypeScript
⚡️ Libraries for building performant and instant search experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
React Instantsearch1,963430419 months ago177August 09, 2023mitTypeScript
⚡️ Lightning-fast search for React and React Native applications, by Algolia.
Search Ui1,8379177 days ago91May 09, 202356apache-2.0TypeScript
Search UI. Libraries for the fast development of modern, engaging search experiences.
Vscode React Javascript Snippets1,540
15 days ago1July 29, 202152mitTypeScript
Extension for React/Javascript snippets with search supporting ES7+ and babel features
Alternatives To React Select Search
Select To Compare

Alternative Project Comparisons

React Select Search


Quick start



Coverage Status


  • Lightweight, with zero dependencies
  • Accessible
  • Headless mode
  • Basic HTML select functionality, including multiple
  • Search/filter options
  • Async options
  • Apply renderers to change markup and behavior
  • Keyboard support
  • Group options with group names, you can search group names
  • Fully stylable


Install it with npm (npm i react-select-search) or yarn (yarn add react-select-search) and import it like you normally would.

Quick start

import SelectSearch from 'react-select-search';

 * The options array should contain objects.
 * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
const options = [
    {name: 'Swedish', value: 'sv'},
    {name: 'English', value: 'en'},
        type: 'group',
        name: 'Group name',
        items: [
            {name: 'Spanish', value: 'es'},

/* Simple example */
<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" />

For more examples, you can take a look in the stories directory.

You will also need some CSS to make it look right. Example theme can be found in style.css. You can also import it:

import 'react-select-search/style.css'

Use with SSR

For use with SSR you might need to use the commonjs bundle (react-select-search/dist/cjs). If you want to utilise the example theme (style.css) you need to check if your build script manipulates class names, for example minifies them. If that's the case, you can use CSS modules to get the class names from the style.css file and apply them using the className object. Example can be seen here as well as here

Headless mode with hooks

If you want complete control (more than styling and custom renderers) you can use hooks to pass data to your own components and build it yourself.

import React from 'react';
import { useSelect } from 'react-select-search';

const CustomSelect = ({ options, value, multiple, disabled }) => {
    const [snapshot, valueProps, optionProps] = useSelect({

    return (
            <button {...valueProps}>{snapshot.displayValue}</button>
            {snapshot.focus && (
                    { => (
                        <li key={option.value}>
                            <button {...optionProps} value={option.value}>{}</button>


Below is all the available options you can pass to the component. Options without defaults are required.

Name Type Default Description
options array See the options documentation below
getOptions function null Get options through a function call, can return a promise for async usage. See get options for more.
filterOptions array null An array of functions that takes the last filtered options and a search query if any. Runs after getOptions.
value string, array null The value should be an array if multiple mode.
multiple boolean false Set to true if you want to allow multiple selected options.
search boolean false Set to true to enable search functionality
disabled boolean false Disables all functionality
closeOnSelect boolean true The selectbox will blur by default when selecting an option. Set this to false to prevent this behavior.
debounce number 0 Number of ms to wait until calling get options when searching.
placeholder string empty string Displayed if no option is selected and/or when search field is focused with empty value.
id string null HTML ID on the top level element.
autoComplete string, on/off off Disables/Enables autoComplete functionality in search field.
autoFocus boolean false Autofocus on select
className string, object select-search-box Set a base class string or pass a function for complete control. Se custom classNames for more.
renderOption function null Function that renders the options. See custom renderers for more.
renderGroupHeader function null Function that renders the group header. See custom renderers for more.
renderValue function null Function that renders the value/search field. See custom renderers for more.
emptyMessage React node null Set empty message for empty options list, you can provide render function without arguments instead plain string message
onChange function null Function to receive and handle value changes.
onFocus function null Focus callback.
onBlur function null Blur callback.

The options object

The options object can contain any properties and values you like. The only required one is name.

Property Type Description Required
name string The name of the option Yes
value string The value of the option Yes, if the type is not "group"
type string If you set the type to "group" you can add an array of options that will be grouped No
items array Array of option objects that will be used if the type is set to "group" Yes, if type is set to "group"
disabled boolean Set to true to disable this option No

Custom class names

If you set a string as the className attribute value, the component will use that as a base for all elements. If you want to fully control the class names you can pass an object with classnames. The following keys exists:

  • container
  • value
  • input
  • select
  • options
  • row
  • option
  • group
  • group-header
  • is-selected
  • is-highlighted
  • is-loading
  • is-multiple
  • has-focus

Custom renderers

If CSS isn't enough, you can also control the HTML for the different parts of the component.

Callback Args Description
renderOption optionsProps: object, optionData: object, optionSnapshot: object, className: string Controls the rendering of the options.
renderGroupHeader name: string Controls the rendering of the group header name
renderValue valueProps: object, snapshot: object, className: string Controls the rendering of the value/input element

The optionProps and the valueProps are needed for the component you render to work. For example:

<SelectSearch renderValue={(valueProps) => <input {...valueProps} />} />

Monkeypatch it if you need to but make sure to not remove important props.

The optionSnapshot is an object that contains the object state: { selected: bool, highlighted: bool }.

Get options

You can fetch options asynchronously with the getOptions property. You can either return options directly or through a Promise.

function getOptions(query) {
    return new Promise((resolve, reject) => {
            .then(response => response.json())
            .then(({ drinks }) => {
                resolve({ idDrink, strDrink }) => ({ value: idDrink, name: strDrink })))

The function runs on each search query update, so you might want to throttle the fetches. If you return a promise, the class is-loading will be applied to the main element, giving you a chance to change the appearance, like adding a spinner. The property fetching is also available in the snapshot that is sent to your render callbacks.


Made with

Popular Reactjs Projects
Popular Search Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.