# React Select — Flexible Select Input Control for React

> React Select is a flexible, accessible select input component for React with support for multi-select, async option loading, creatable options, and custom styling.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# React Select — Flexible Select Input Control 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' },
  { value: 'py', label: 'Python' }
];

function App() {
  return <Select options={options} isMulti placeholder="Pick languages..." />;
}
```

## Introduction
The native HTML `<select>` element is limited in styling and functionality. React Select replaces it with a fully customizable component that supports searching, multi-select, async loading, option creation, and accessible keyboard navigation. It is one of the most widely used form controls in the React ecosystem.

## What React Select Does
- Renders a searchable dropdown with type-ahead filtering
- Supports single and multi-value selection with tag-style display
- Loads options asynchronously from an API with built-in debouncing
- Allows users to create new options on the fly with the Creatable variant
- Provides full keyboard navigation and screen reader accessibility

## Architecture Overview
React Select is built around a core `Select` component that manages internal state for the menu, input value, and selected values. It uses a styles API based on emotion for component-level CSS-in-JS. Each visual piece (control, menu, option, indicator) is a replaceable component, letting developers swap in custom renders. The async and creatable behaviors are implemented as higher-order components that wrap the base Select.

## Self-Hosting & Configuration
- Install from npm and import `Select`, `AsyncSelect`, or `CreatableSelect`
- Pass `options` as an array of `{ value, label }` objects
- Use `isMulti` prop for multi-select and `isClearable` for a clear button
- Customize appearance via the `styles` prop or `classNames` prop for CSS modules
- Use `components` prop to replace any internal part like `Option`, `Menu`, or `Control`

## Key Features
- Type-ahead search with customizable filter logic
- Grouped options with `<optgroup>`-style section headers
- Portal rendering via `menuPortalTarget` to escape overflow containers
- Accessible by default with ARIA attributes and live region announcements
- Full TypeScript generics for type-safe option values

## Comparison with Similar Tools
- **Native `<select>`** — no styling or search; React Select provides full customization
- **Downshift** — lower-level headless hook for building custom selects; React Select is batteries-included
- **Radix Select** — unstyled accessible primitive; React Select includes styling and search out of the box
- **Ant Design Select** — tied to Ant Design system; React Select is design-system agnostic
- **Choices.js** — vanilla JS select replacement; React Select is React-native with controlled state

## FAQ
**Q: How do I load options from an API?**
A: Use `AsyncSelect` and pass a `loadOptions` function that returns a promise resolving to an options array.

**Q: Can I style React Select without CSS-in-JS?**
A: Yes. Use the `classNames` prop to apply your own CSS classes, or use `unstyled` mode to strip all default styles.

**Q: How do I handle large option lists?**
A: Use `react-window` with React Select via `react-select-virtualized` or a custom `MenuList` component for windowed rendering.

**Q: Is React Select accessible?**
A: Yes. It follows WAI-ARIA combobox patterns with keyboard navigation, focus management, and live region announcements for screen readers.

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

---
Source: https://tokrepo.com/en/workflows/react-select-flexible-select-input-control-react-c5631a7c
Author: AI Open Source