# React Select — Flexible Select Input for React

> A fully featured, accessible select control for React applications with support for multi-select, async loading, creatable options, and custom styling.

## Install

Save in your project root:

# React Select — Flexible Select Input for React

## Quick Use
```bash
npm install react-select
```
```jsx
import Select from 'react-select';
const options = [
  { value: 'js', label: 'JavaScript' },
  { value: 'ts', label: 'TypeScript' },
];
export default () => <Select options={options} />;
```

## Introduction
React Select is one of the most widely used select components in the React ecosystem. It provides a polished, accessible dropdown with built-in support for searching, multi-select, async option loading, and creatable inputs. The library handles keyboard navigation, screen reader announcements, and complex use cases out of the box.

## What React Select Does
- Renders a searchable, accessible dropdown select input
- Supports single-select and multi-select modes
- Loads options asynchronously via promises
- Allows users to create new options on the fly with Creatable
- Provides full control over rendering via replaceable component architecture

## Architecture Overview
React Select is built on a headless-ish architecture where every visible piece (Menu, Option, Control, Placeholder, etc.) is a replaceable React component. State management is handled internally via a state machine that tracks menu open/close, focus, input value, and selected values. Styles are applied through an emotion-based CSS-in-JS layer that can be fully overridden via the `styles` prop or replaced with `classNames`.

## Self-Hosting & Configuration
- Install via npm or yarn and import the default or async variant
- Pass `options` as an array of `{ value, label }` objects
- Use `isMulti` prop to enable multi-select mode
- Use `AsyncSelect` from `react-select/async` for server-side option loading
- Override styles using the `styles` prop with per-component style functions

## Key Features
- Keyboard navigation with full ARIA support and screen reader announcements
- Searchable input with customizable filter logic
- Grouped options and fixed options support
- Portal-based menu rendering to escape overflow containers
- Replaceable components for full visual customization

## Comparison with Similar Tools
- **Downshift** — headless primitive for custom select UIs; React Select is batteries-included
- **Radix Select** — accessible primitive with no styling; React Select ships with default styles
- **Ant Design Select** — tightly coupled to Ant Design system; React Select is standalone
- **Headless UI Listbox** — Tailwind-oriented headless primitive; React Select works with any styling approach
- **Mantine Select** — part of the Mantine ecosystem; React Select is framework-agnostic within React

## FAQ
**Q: How do I style React Select with Tailwind CSS?**
A: Use the `classNames` prop introduced in v5 to apply Tailwind classes to each sub-component, or use `unstyled` mode to remove all default styles.

**Q: Can I use it with server-side rendering?**
A: Yes. React Select supports SSR. For Next.js, you may need dynamic import with `ssr: false` or handle the hydration mismatch with the `instanceId` prop.

**Q: How do I handle very large option lists?**
A: Use `AsyncSelect` to load options on demand, or combine with `react-window` via the `MenuList` component override for virtualized rendering.

**Q: Is it accessible?**
A: Yes. React Select follows WAI-ARIA combobox patterns with live region announcements for screen readers.

## Sources
- https://github.com/JedWatson/react-select
- https://react-select.com

---
Source: https://tokrepo.com/en/workflows/asset-368c92d0
Author: AI Open Source