# React Select — Flexible Select Input Component for React

> A highly customizable, accessible select input control for React with support for multi-select, async loading, creatable options, and advanced filtering.

## Install

Save in your project root:

# React Select — Flexible Select Input Component for React

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

## Introduction
React Select is a mature, battle-tested select input for React that handles single select, multi-select, async data loading, and creatable options. It provides accessible, keyboard-navigable dropdowns with a rich API for customization.

## What React Select Does
- Renders single or multi-value select inputs with search and filtering
- Supports async option loading from APIs with built-in loading states
- Allows users to create new options on the fly with the Creatable variant
- Provides full keyboard navigation and ARIA attributes for accessibility
- Exposes a component replacement API for complete visual customization

## Architecture Overview
React Select is built as a set of composable React components. The core Select component manages state (menu open/close, focused option, selected values) and delegates rendering to replaceable sub-components like Menu, Option, Control, and MultiValue. Styles are applied via a style object API or CSS class names, and the library uses Emotion for default styling.

## Self-Hosting & Configuration
- Install via npm, yarn, or pnpm: `npm install react-select`
- Import `Select`, `AsyncSelect`, or `CreatableSelect` based on your use case
- Pass options as an array of `{ value, label }` objects
- Customize appearance by overriding components or passing a `styles` prop
- For server-side rendering, ensure Emotion SSR setup is in place

## Key Features
- Multi-select with removable tags and clear-all functionality
- Async variant fetches options from a remote API on input change
- Creatable variant lets users type and create new entries inline
- Fully replaceable sub-components for custom rendering
- Menuportal support to render dropdowns outside overflow-hidden containers

## Comparison with Similar Tools
- **Headless UI Listbox** — unstyled and framework-agnostic; React Select provides rich defaults
- **Downshift** — lower-level primitives for building custom selects; React Select is ready to use
- **Radix Select** — unstyled accessible primitive; React Select ships with styled defaults
- **Ant Design Select** — part of a full UI kit; React Select is standalone and lighter
- **Mantine Select** — tied to Mantine theme; React Select works with any styling approach

## FAQ
**Q: How do I style React Select?**
A: Use the `styles` prop to override individual component styles, or the `classNames` prop for CSS classes.

**Q: Does it support SSR?**
A: Yes, but you need to configure Emotion SSR extraction for proper hydration.

**Q: Can I load options from an API?**
A: Yes, use `AsyncSelect` and provide a `loadOptions` function that returns a promise.

**Q: Is it accessible?**
A: Yes. It implements WAI-ARIA combobox patterns with full keyboard navigation.

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

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