# React Aria

> Use an accessible React color picker with React Aria Components, keeping one overlay and one focus manager while ChromaPanel handles color input.

Source: https://chroma-panel.jscrate.dev/react/integrations/react-aria
Last updated: 2026-09-21

chroma-panel does not depend on React Aria, but the two compose cleanly. Use
`ColorInput` on its own, or put the inline `ChromaPanel` inside a React Aria
Popover or Dialog.

## Install

```bash
npm install chroma-panel react-aria-components
```

You only need `react-aria-components` when your app already uses it or when you
want React Aria to own the surrounding overlay.

## Use a React Aria popover

Keep a single trigger and a single popover. `DialogTrigger` manages the open
state, `Popover` handles placement, and `ChromaPanel` supplies the color wheel,
sliders, palettes, and other color controls.

```tsx
import { ChromaPanel } from "chroma-panel";
import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";

export function AriaColorPicker() {
  return (
    <DialogTrigger>
      <Button>Choose color</Button>
      <Popover placement="bottom start">
        <Dialog aria-label="Choose a color">
          <ChromaPanel defaultValue="#3366cc" showTitleBar={false} />
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}
```

Do not put `ColorInput` inside this popover. `ColorInput` has its own trigger and
overlay, so nesting it would duplicate dismissal and focus behavior.

## Accessibility responsibilities

React Aria owns the overlay semantics in this example. chroma-panel owns the
picker controls inside it:

- Color axes are native range inputs with keyboard and screen-reader values.
- Swatches are buttons with accessible names and selected state.
- Mode tabs use a roving tab stop.
- Reduced motion and forced-colors settings are respected.

Give the React Aria `Dialog` a useful label, and keep labels on any custom
trigger or form field. The [accessibility guide](https://chroma-panel.jscrate.dev/react/overview/accessibility)
lists the keyboard commands and state attributes exposed by the picker.

## Use it without another popover

If you do not need React Aria to control the overlay, render `ColorInput`
directly. It already handles focus return, Escape, outside clicks, and a mobile
bottom sheet. See the [ColorInput reference](https://chroma-panel.jscrate.dev/react/components/color-input).