# React Select — The Flexible Select Input for React

> A highly customizable, accessible select/dropdown component for React apps with async loading, multi-select, creatable options, and full keyboard navigation.

## Install

Save as a script file and run:

# React Select — The Flexible Select Input for React

## Quick Use
```bash
npm install react-select
```
```jsx
import Select from 'react-select';
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'vanilla', label: 'Vanilla' },
];
function App() {
  return <Select options={options} />;
}
```

## Introduction
React Select is a flexible, accessible select input control for React. It supports single and multi-select, async option loading, creatable entries, and custom styling out of the box. The library handles edge cases like keyboard navigation, screen readers, and portal-based menu rendering.

## What React Select Does
- Provides single-select and multi-select dropdown components
- Supports async option loading from APIs with built-in debounce
- Allows users to create new options on the fly (Creatable)
- Renders menus in portals to avoid overflow clipping issues
- Offers full keyboard navigation and ARIA accessibility

## Architecture Overview
React Select is built on a composable component architecture. The core `Select` component manages state internally while exposing it through props for controlled usage. Custom components (Menu, Option, Control, etc.) can replace any part of the UI via the `components` prop. Styling is handled through a `styles` API that applies inline styles via getter functions, or through `classNames` for CSS class-based theming.

## Self-Hosting & Configuration
- Install via npm or yarn: `npm install react-select`
- Import specific entry points: `react-select`, `react-select/async`, `react-select/creatable`
- Customize appearance with the `styles` or `classNames` prop
- Control menu placement with `menuPortalTarget` for rendering in a portal
- Use `formatOptionLabel` for rich option rendering with icons or badges

## Key Features
- Accessible by default with ARIA roles and keyboard support
- Async, Creatable, and AsyncCreatable variants available
- Full TypeScript support with generic type parameters
- Custom component replacement for every part of the dropdown
- Built-in filtering, grouping, and option formatting

## Comparison with Similar Tools
- **Downshift** — headless hook-based, more control but requires building the UI yourself
- **Headless UI Listbox** — unstyled accessible primitive, less feature-rich out of the box
- **Radix Select** — unstyled primitive focused on accessibility, no async/creatable
- **MUI Autocomplete** — part of Material UI, tied to MUI theming system
- **Ant Design Select** — feature-rich but coupled to the Ant Design ecosystem

## FAQ
**Q: How do I load options asynchronously?**
A: Use `AsyncSelect` from `react-select/async` and pass a `loadOptions` function that returns a promise of options.

**Q: Can users create new options not in the list?**
A: Yes, use `CreatableSelect` from `react-select/creatable` which adds a "Create" option when no match is found.

**Q: How do I style React Select with Tailwind CSS?**
A: Use the `classNames` prop to apply Tailwind classes to each internal component (control, menu, option, etc.).

**Q: Does React Select support SSR?**
A: Yes, but you may need to set `menuPortalTarget` carefully and handle hydration to avoid mismatches.

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

---
Source: https://tokrepo.com/en/workflows/asset-c154fc0e
Author: Script Depot