ColorSwatchPicker

A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.

layout

Example

ColorSwatchPicker.tsx

ColorSwatchPicker.css

Example

ColorSwatchPicker.tsx

ColorSwatchPicker.css

import {ColorSwatchPicker, ColorSwatchPickerItem} from './ColorSwatchPicker';

<ColorSwatchPicker aria-label="Background color">
  <ColorSwatchPickerItem color="#A00" />
  <ColorSwatchPickerItem color="#f80" />
  <ColorSwatchPickerItem color="#080" />
  <ColorSwatchPickerItem color="#08f" />
  <ColorSwatchPickerItem color="#088" />
  <ColorSwatchPickerItem color="#008" />
</ColorSwatchPicker>

Value

Use the value or defaultValue prop to set the selected color, and onChange to handle selection changes. The value may be a string or Color object, parsed using the parseColor function.

Selected color: rgb(170, 0, 0)

import {ColorSwatchPicker, ColorSwatchPickerItem} from './ColorSwatchPicker';
import {parseColor} from 'react-aria-components';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(parseColor('#A00'));

  return (
    <>
      <ColorSwatchPicker value={value} onChange={setValue}>
        <ColorSwatchPickerItem color="#A00" />
        <ColorSwatchPickerItem color="#f80" />
        <ColorSwatchPickerItem color="#080" />
        <ColorSwatchPickerItem color="#08f" />
        <ColorSwatchPickerItem color="#088" />
        <ColorSwatchPickerItem color="#008" />
      </ColorSwatchPicker>
      <pre style={{fontSize: 12}}>Selected color: {value.toString('rgb')}</pre>
    </>
  );
}

API

<ColorSwatchPicker>
  <ColorSwatchPickerItem>
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>

ColorSwatchPicker

Name	Type	Default
`children`	`ReactNode`	Default: —
The children of the ColorSwatchPicker.
`layout`	`'grid' \| 'stack'`	Default: `'grid'`
Whether the items are arranged in a stack or grid.

`value`	`string \| Color`	Default: —
The current value (controlled).
`defaultValue`	`string \| Color`	Default: —
The default value (uncontrolled).
`onChange`	`(value: Color) => void`	Default: —
Handler that is called when the value changes.

Default className: react-aria-ColorSwatchPicker

Render Prop	CSS Selector
`isEmpty`	CSS Selector: `[data-empty]`
Whether the listbox has no items and should display its empty state.
`isFocused`	CSS Selector: `[data-focused]`
Whether the listbox is currently focused.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the listbox is currently keyboard focused.
`layout`	CSS Selector: `[data-layout="stack \| grid"]`
Whether the items are arranged in a stack or grid.
`state`	CSS Selector: `—`
State of the listbox.

ColorSwatchPickerItem

Name	Type
`color`	`string \| Color`
The color of the swatch.
`isDisabled`	`boolean`
Whether the color swatch is disabled.
`children`	`ChildrenOrFunction<ColorSwatchPickerItemRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-ColorSwatchPickerItem

Render Prop	CSS Selector
`color`	CSS Selector: `—`
The color of the swatch.
`isHovered`	CSS Selector: `[data-hovered]`
Whether the item is currently hovered with a mouse.
`isPressed`	CSS Selector: `[data-pressed]`
Whether the item is currently in a pressed state.
`isSelected`	CSS Selector: `[data-selected]`
Whether the item is currently selected.
`isFocused`	CSS Selector: `[data-focused]`
Whether the item is currently focused.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the item is currently keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may not be focused. Dependent on `disabledKeys` and `disabledBehavior`.