jedwatson/react-select

★ 28,041TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((react-select))
    What it does
      Searchable dropdown
      Multi-select
      Async loading
    Key features
      Custom components
      Creatable options
      TypeScript support
    Use cases
      Form inputs
      Tag pickers
      API-powered search
    Audience
      React developers
      Frontend teams

mindmap root((react-select)) What it does Searchable dropdown Multi-select Async loading Key features Custom components Creatable options TypeScript support Use cases Form inputs Tag pickers API-powered search Audience React developers Frontend teams

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace a plain browser select input on a form with a searchable, styled dropdown that users can filter by typing.

USE CASE 2

Build a multi-select tag picker that lets users choose several categories at once from a long list.

USE CASE 3

Load dropdown options dynamically from an API as the user types, instead of loading all options upfront.

Tech stack

TypeScriptReactJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

npm install react-select, works immediately with no extra config beyond passing an options array.

MIT license, use freely for any purpose including commercial projects, just keep the copyright notice.

In plain English

React-Select is a ready-made dropdown component for React, the popular JavaScript library for building web interfaces. A dropdown (also called a select input) is the UI element that lets users pick one or more items from a list, think of a "Country" or "Category" field on a form. While browsers have a basic built-in version, it is hard to style and limited in features. React-Select replaces it with a fully featured, customizable alternative. Out of the box it supports: searching through options by typing, selecting multiple values at once, grouping options under headers, loading options asynchronously from a server, and allowing users to create new options that are not in the original list. The styling is fully customizable, and you can even swap out individual internal components (the dropdown arrow, the option items, the container) with your own versions if you need precise control over the look and behavior. Using it is straightforward: you install it from npm, import the Select component, pass it an array of option objects with a value and label, and add an onChange handler to track the selected value. The code examples in the README show the complete setup in about ten lines. It is written in TypeScript, which means it comes with built-in type definitions that help catch errors if you are using TypeScript in your own project. You would use React-Select whenever you need a polished, accessible dropdown in a React application and the browser's default select element is not flexible enough.

Copy-paste prompts

Prompt 1

Using react-select, show me how to create a searchable country dropdown with TypeScript types, where selecting a country logs its value to console.

Prompt 2

Write a react-select AsyncSelect component that fetches user options from '/api/users?q=' as the user types and debounces the request by 300ms.

Prompt 3

Show me how to allow users to create new options in a react-select dropdown and capture those custom values alongside the predefined ones.

Prompt 4

Give me an example of a react-select component with grouped options, multi-select enabled, and custom styles to match a dark theme.

Open on GitHub → Explain another repo

← jedwatson on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.