beta

ColorSwatchPicker

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

installyarn add react-aria-components
version1.3.3
usageimport {ColorSwatchPicker} from 'react-aria-components'

Example#


import {ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem} from 'react-aria-components';

<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#A00">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#f80">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#080">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#08f">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#088">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#008">
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
import {
  ColorSwatch,
  ColorSwatchPicker,
  ColorSwatchPickerItem
} from 'react-aria-components';

<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#A00">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#f80">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#080">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#08f">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#088">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#008">
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
import {
  ColorSwatch,
  ColorSwatchPicker,
  ColorSwatchPickerItem
} from 'react-aria-components';

<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#A00">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#f80">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#080">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#08f">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#088">
    <ColorSwatch />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#008">
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
Show CSS
@import "@react-aria/example-theme";

.react-aria-ColorSwatchPicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-aria-ColorSwatchPickerItem {
  position: relative;
  outline: none;
  border-radius: 4px;
  width: fit-content;
  forced-color-adjust: none;

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  &[data-selected]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid black;
    outline: 2px solid white;
    outline-offset: -4px;
    border-radius: inherit;
  }
}
@import "@react-aria/example-theme";

.react-aria-ColorSwatchPicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-aria-ColorSwatchPickerItem {
  position: relative;
  outline: none;
  border-radius: 4px;
  width: fit-content;
  forced-color-adjust: none;

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  &[data-selected]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid black;
    outline: 2px solid white;
    outline-offset: -4px;
    border-radius: inherit;
  }
}
@import "@react-aria/example-theme";

.react-aria-ColorSwatchPicker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.react-aria-ColorSwatchPickerItem {
  position: relative;
  outline: none;
  border-radius: 4px;
  width: fit-content;
  forced-color-adjust: none;

  &[data-focus-visible] {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  &[data-selected]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid black;
    outline: 2px solid white;
    outline-offset: -4px;
    border-radius: inherit;
  }
}

Features#


A ColorSwatchPicker wraps the ListBox component to simplify building color swatch pickers that work with a ColorPicker.

  • Item selection – A single color value can be selected from a list of unique colors. Color swatches are automatically matched with the value no matter the color space they are defined in.
  • Keyboard navigation – Color swatches can be navigated using the arrow keys, along with page up/down, home/end, etc.
  • Layout options – Items can be arranged in a vertical or horizontal stack, or as a two-dimensional grid.
  • Accessible – Follows the ARIA listbox pattern. Each swatch includes a localized color description for screen reader users (e.g. "dark vibrant blue").
  • Styleable – Items include builtin states for styling, such as hover, press, focus, selected, and disabled.

Anatomy#


A ColorSwatchPicker consists of a container element, with a list of color swatches inside. Users can select a color by clicking, tapping, or navigating with the keyboard.

import {ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem} from 'react-aria-components';

<ColorSwatchPicker>
  <ColorSwatchPickerItem>
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
import {
  ColorSwatch,
  ColorSwatchPicker,
  ColorSwatchPickerItem
} from 'react-aria-components';

<ColorSwatchPicker>
  <ColorSwatchPickerItem>
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
import {
  ColorSwatch,
  ColorSwatchPicker,
  ColorSwatchPickerItem
} from 'react-aria-components';

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

ColorSwatchPicker is a convenience wrapper around the ListBox component. If you need additional flexibility, such as support for multiple selection, duplicate colors, drag and drop, etc., you can use the ListBox component directly.

Reusable wrappers#


If you will use a ColorSwatchPicker in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

This example wraps ColorSwatchPicker and ColorSwatchPickerItem, reusing the MyColorSwatch component from the ColorSwatch docs.

import type {ColorSwatchPickerItemProps, ColorSwatchPickerProps} from 'react-aria-components';
import {MyColorSwatch} from './ColorSwatch';

export function MyColorSwatchPicker(
  { children, ...props }: ColorSwatchPickerProps
) {
  return (
    <ColorSwatchPicker {...props}>
      {children}
    </ColorSwatchPicker>
  );
}

export function MyColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
  return (
    <ColorSwatchPickerItem {...props}>
      <MyColorSwatch />
    </ColorSwatchPickerItem>
  );
}

<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>
import type {
  ColorSwatchPickerItemProps,
  ColorSwatchPickerProps
} from 'react-aria-components';
import {MyColorSwatch} from './ColorSwatch';

export function MyColorSwatchPicker(
  { children, ...props }: ColorSwatchPickerProps
) {
  return (
    <ColorSwatchPicker {...props}>
      {children}
    </ColorSwatchPicker>
  );
}

export function MyColorSwatchPickerItem(
  props: ColorSwatchPickerItemProps
) {
  return (
    <ColorSwatchPickerItem {...props}>
      <MyColorSwatch />
    </ColorSwatchPickerItem>
  );
}

<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>
import type {
  ColorSwatchPickerItemProps,
  ColorSwatchPickerProps
} from 'react-aria-components';
import {MyColorSwatch} from './ColorSwatch';

export function MyColorSwatchPicker(
  { children, ...props }:
    ColorSwatchPickerProps
) {
  return (
    <ColorSwatchPicker
      {...props}
    >
      {children}
    </ColorSwatchPicker>
  );
}

export function MyColorSwatchPickerItem(
  props:
    ColorSwatchPickerItemProps
) {
  return (
    <ColorSwatchPickerItem
      {...props}
    >
      <MyColorSwatch />
    </ColorSwatchPickerItem>
  );
}

<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>

Value#


ColorSwatchPicker accepts either an uncontrolled default value or a controlled value, provided using the defaultValue or value props respectively. The value provided to either of these props should be a color string or Color object. The value is matched against the color of each ColorSwatch, including equivalent colors in different color spaces.

In the example below, the parseColor function is used to parse the initial color from a HSL string so that value's type remains consistent.

import {parseColor} from 'react-aria-components';

function Example() {
  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 33.33%)'));

  return (
    <MyColorSwatchPicker value={color} onChange={setColor}>
      <MyColorSwatchPickerItem color="#A00" />
      <MyColorSwatchPickerItem color="#f80" />
      <MyColorSwatchPickerItem color="#080" />
    </MyColorSwatchPicker>
  );
}
import {parseColor} from 'react-aria-components';

function Example() {
  let [color, setColor] = React.useState(
    parseColor('hsl(0, 100%, 33.33%)')
  );

  return (
    <MyColorSwatchPicker value={color} onChange={setColor}>
      <MyColorSwatchPickerItem color="#A00" />
      <MyColorSwatchPickerItem color="#f80" />
      <MyColorSwatchPickerItem color="#080" />
    </MyColorSwatchPicker>
  );
}
import {parseColor} from 'react-aria-components';

function Example() {
  let [color, setColor] =
    React.useState(
      parseColor(
        'hsl(0, 100%, 33.33%)'
      )
    );

  return (
    <MyColorSwatchPicker
      value={color}
      onChange={setColor}
    >
      <MyColorSwatchPickerItem color="#A00" />
      <MyColorSwatchPickerItem color="#f80" />
      <MyColorSwatchPickerItem color="#080" />
    </MyColorSwatchPicker>
  );
}

Note: ColorSwatches rendered inside a ColorSwatchPicker must have unique colors, even between different color spaces. For example, the values #f00, hsl(0, 100%, 50%), and hsb(0, 100%, 100%) are all equivalent and considered duplicates. This is required so that selection behavior works properly.

Labeling#


By default, ColorSwatchPicker has an aria-label with the localized string "Color swatches". This can be overridden with a more specific accessibility label using the aria-label or aria-labelledby props. All labels should be localized.

<MyColorSwatchPicker aria-label="Fill color">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>
<MyColorSwatchPicker aria-label="Fill color">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>
<MyColorSwatchPicker aria-label="Fill color">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>

Events#


ColorSwatchPicker accepts an onChange prop which is triggered whenever the value is edited by the user. It receives a Color object as a parameter.

The example below uses onChange to update a separate element with the color value as a string.

import {parseColor} from 'react-aria-components';

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

  return (
    <div>
      <MyColorSwatchPicker value={value} onChange={setValue}>
        <MyColorSwatchPickerItem color="#A00" />
        <MyColorSwatchPickerItem color="#f80" />
        <MyColorSwatchPickerItem color="#080" />
        <MyColorSwatchPickerItem color="#08f" />
        <MyColorSwatchPickerItem color="#088" />
        <MyColorSwatchPickerItem color="#008" />
      </MyColorSwatchPicker>
      <p>Selected color: {value.toString('rgb')}</p>
    </div>
  );
}
import {parseColor} from 'react-aria-components';

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

  return (
    <div>
      <MyColorSwatchPicker
        value={value}
        onChange={setValue}
      >
        <MyColorSwatchPickerItem color="#A00" />
        <MyColorSwatchPickerItem color="#f80" />
        <MyColorSwatchPickerItem color="#080" />
        <MyColorSwatchPickerItem color="#08f" />
        <MyColorSwatchPickerItem color="#088" />
        <MyColorSwatchPickerItem color="#008" />
      </MyColorSwatchPicker>
      <p>Selected color: {value.toString('rgb')}</p>
    </div>
  );
}
import {parseColor} from 'react-aria-components';

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

  return (
    <div>
      <MyColorSwatchPicker
        value={value}
        onChange={setValue}
      >
        <MyColorSwatchPickerItem color="#A00" />
        <MyColorSwatchPickerItem color="#f80" />
        <MyColorSwatchPickerItem color="#080" />
        <MyColorSwatchPickerItem color="#08f" />
        <MyColorSwatchPickerItem color="#088" />
        <MyColorSwatchPickerItem color="#008" />
      </MyColorSwatchPicker>
      <p>
        Selected color:
        {' '}
        {value.toString(
          'rgb'
        )}
      </p>
    </div>
  );
}

Disabled#


A ColorSwatchPickerItem can be disabled using the isDisabled prop. Disabled swatches cannot be selected, and are not focusable or interactive.

<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" isDisabled />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>
<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" isDisabled />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>
<MyColorSwatchPicker>
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem
    color="#f80"
    isDisabled
  />
  <MyColorSwatchPickerItem color="#080" />
</MyColorSwatchPicker>
Show CSS
.react-aria-ColorSwatchPickerItem {
  &[data-disabled] {
    opacity: 0.2;
  }
}
.react-aria-ColorSwatchPickerItem {
  &[data-disabled] {
    opacity: 0.2;
  }
}
.react-aria-ColorSwatchPickerItem {
  &[data-disabled] {
    opacity: 0.2;
  }
}

Stack layout#


By default, ColorSwatchPicker expects items to be arranged horizontally, optionally wrapping to form a grid, and implements keyboard navigation and drag and drop accordingly. The layout prop can be used to display the swatches as a vertical stack instead.

<MyColorSwatchPicker layout="stack">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>
<MyColorSwatchPicker layout="stack">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>
<MyColorSwatchPicker layout="stack">
  <MyColorSwatchPickerItem color="#A00" />
  <MyColorSwatchPickerItem color="#f80" />
  <MyColorSwatchPickerItem color="#080" />
  <MyColorSwatchPickerItem color="#08f" />
  <MyColorSwatchPickerItem color="#088" />
  <MyColorSwatchPickerItem color="#008" />
</MyColorSwatchPicker>
Show CSS
.react-aria-ColorSwatchPicker {
  &[data-layout=stack] {
    flex-direction: column;
  }
}
.react-aria-ColorSwatchPicker {
  &[data-layout=stack] {
    flex-direction: column;
  }
}
.react-aria-ColorSwatchPicker {
  &[data-layout=stack] {
    flex-direction: column;
  }
}

Props#


ColorSwatchPicker#

NameTypeDefaultDescription
childrenReactNodeThe children of the ColorSwatchPicker.
layout'grid''stack''grid'Whether the items are arranged in a stack or grid.
valuestringColorThe current value (controlled).
defaultValuestringColorThe default value (uncontrolled).
classNamestring( (values: ColorSwatchPickerRenderProps{
defaultClassName: stringundefined
} )) => string
The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties( (values: ColorSwatchPickerRenderProps{
defaultStyle: CSSProperties
} )) => CSSPropertiesundefined
The inline style for the element. A function may be provided to compute the style based on component state.
Events
NameTypeDescription
onChange( (value: Color )) => voidHandler that is called when the value changes.
Accessibility
NameTypeDescription
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.

ColorSwatchPickerItem#

A <ColorSwatchPickerItem> represents an individual item within a <ColorSwatchPicker>. It should contain a <ColorSwatch>.

NameTypeDescription
colorstringColorThe color of the swatch.
isDisabledbooleanWhether the color swatch is disabled.
childrenReactNode( (values: ColorSwatchPickerItemRenderProps{
defaultChildren: ReactNodeundefined
} )) => ReactNode
The children of the component. A function may be provided to alter the children based on component state.
classNamestring( (values: ColorSwatchPickerItemRenderProps{
defaultClassName: stringundefined
} )) => string
The CSS className for the element. A function may be provided to compute the class based on component state.
styleCSSProperties( (values: ColorSwatchPickerItemRenderProps{
defaultStyle: CSSProperties
} )) => CSSPropertiesundefined
The inline style for the element. A function may be provided to compute the style based on component state.
Events
NameTypeDescription
onHoverStart( (e: HoverEvent )) => voidHandler that is called when a hover interaction starts.
onHoverEnd( (e: HoverEvent )) => voidHandler that is called when a hover interaction ends.
onHoverChange( (isHovering: boolean )) => voidHandler that is called when the hover state changes.

Styling#


React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName naming convention.

.react-aria-ColorSwatchPicker {
  /* ... */
}
.react-aria-ColorSwatchPicker {
  /* ... */
}
.react-aria-ColorSwatchPicker {
  /* ... */
}

A custom className can also be specified on any component. This overrides the default className provided by React Aria with your own.

<ColorSwatchPicker className="my-color-swatch-picker">
  {/* ... */}
</ColorSwatchPicker>
<ColorSwatchPicker className="my-color-swatch-picker">
  {/* ... */}
</ColorSwatchPicker>
<ColorSwatchPicker className="my-color-swatch-picker">
  {/* ... */}
</ColorSwatchPicker>

In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:

.react-aria-ColorSwatchPickerItem[data-selected] {
  /* ... */
}
.react-aria-ColorSwatchPickerItem[data-selected] {
  /* ... */
}
.react-aria-ColorSwatchPickerItem[data-selected] {
  /* ... */
}

The className and style props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like Tailwind.

<ColorSwatchPickerItem
  className={({ isSelected }) =>
    isSelected ? 'border-black' : 'border-transparent'}
/>
<ColorSwatchPickerItem
  className={({ isSelected }) =>
    isSelected ? 'border-black' : 'border-transparent'}
/>
<ColorSwatchPickerItem
  className={(
    { isSelected }
  ) =>
    isSelected
      ? 'border-black'
      : 'border-transparent'}
/>

The states, selectors, and render props for each component used in a ColorSwatchPicker are documented below.

ColorSwatchPicker#

The ColorSwatchPicker component can be targeted with the .react-aria-ColorSwatchPicker CSS selector, or by overriding with a custom className. It supports the following states:

NameCSS SelectorDescription
isEmpty[data-empty]Whether the listbox has no items and should display its empty state.
isFocused[data-focused]Whether the listbox is currently focused.
isFocusVisible[data-focus-visible]Whether the listbox is currently keyboard focused.
layout[data-layout="stack | grid"]Whether the items are arranged in a stack or grid.
stateState of the listbox.

ColorSwatchPickerItem#

The ColorSwatchPickerItem component can be targeted with the .react-aria-ColorSwatchPickerItem CSS selector, or by overriding with a custom className. It supports the following states:

NameCSS SelectorDescription
colorThe color of the swatch.
isHovered[data-hovered]Whether the item is currently hovered with a mouse.
isPressed[data-pressed]Whether the item is currently in a pressed state.
isSelected[data-selected]Whether the item is currently selected.
isFocused[data-focused]Whether the item is currently focused.
isFocusVisible[data-focus-visible]Whether the item is currently keyboard focused.
isDisabled[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.

ColorSwatch#

The ColorSwatch component can be targeted with the .react-aria-ColorSwatch CSS selector, or by overriding with a custom className. It supports the following states:

NameDescription
colorThe color of the swatch.

Advanced customization#


Composition#

If you need to customize one of the components within a ColorSwatchPicker, such as ColorSwatchPickerItem or ColorSwatch, in many cases you can create a wrapper component. This lets you customize the props passed to the component.

function MyColorSwatchPickerItem(props) {
  return <ColorSwatchPickerItem {...props} className="my-swatch" />
}
function MyColorSwatchPickerItem(props) {
  return (
    <ColorSwatchPickerItem
      {...props}
      className="my-swatch"
    />
  );
}
function MyColorSwatchPickerItem(
  props
) {
  return (
    <ColorSwatchPickerItem
      {...props}
      className="my-swatch"
    />
  );
}

Contexts#

All React Aria Components export a corresponding context that can be used to send props to them from a parent element. This enables you to build your own compositional APIs similar to those found in React Aria Components itself. You can send any prop or ref via context that you could pass to the corresponding component. The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence (following the rules documented in mergeProps).

ComponentContextPropsRef
ColorSwatchPickerColorSwatchPickerContextColorSwatchPickerPropsHTMLDivElement

This example shows how to synchronize a ColorSwatchPicker and a ColorField via context.

import {ColorSwatchPickerContext} from 'react-aria-components';
import {MyColorField} from './ColorField';

function ColorSelector({children}) {
  let [value, setValue] = React.useState(parseColor('#A00'));
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
      <MyColorField label="Color" value={value} onChange={setValue} />
      <ColorSwatchPickerContext.Provider value={{value, onChange: setValue}}>
        {children}
      </ColorSwatchPickerContext.Provider>    </div>
  );
}

<ColorSelector>
  <MyColorSwatchPicker>
    <MyColorSwatchPickerItem color="#A00" />
    <MyColorSwatchPickerItem color="#f80" />
    <MyColorSwatchPickerItem color="#080" />
  </MyColorSwatchPicker>
</ColorSelector>
import {ColorSwatchPickerContext} from 'react-aria-components';
import {MyColorField} from './ColorField';

function ColorSelector({ children }) {
  let [value, setValue] = React.useState(
    parseColor('#A00')
  );
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 8
      }}
    >
      <MyColorField
        label="Color"
        value={value}
        onChange={setValue}
      />
      <ColorSwatchPickerContext.Provider
        value={{ value, onChange: setValue }}
      >
        {children}
      </ColorSwatchPickerContext.Provider>    </div>
  );
}

<ColorSelector>
  <MyColorSwatchPicker>
    <MyColorSwatchPickerItem color="#A00" />
    <MyColorSwatchPickerItem color="#f80" />
    <MyColorSwatchPickerItem color="#080" />
  </MyColorSwatchPicker>
</ColorSelector>
import {ColorSwatchPickerContext} from 'react-aria-components';
import {MyColorField} from './ColorField';

function ColorSelector(
  { children }
) {
  let [value, setValue] =
    React.useState(
      parseColor('#A00')
    );
  return (
    <div
      style={{
        display: 'flex',
        flexDirection:
          'column',
        gap: 8
      }}
    >
      <MyColorField
        label="Color"
        value={value}
        onChange={setValue}
      />
      <ColorSwatchPickerContext.Provider
        value={{
          value,
          onChange:
            setValue
        }}
      >
        {children}
      </ColorSwatchPickerContext.Provider>    </div>
  );
}

<ColorSelector>
  <MyColorSwatchPicker>
    <MyColorSwatchPickerItem color="#A00" />
    <MyColorSwatchPickerItem color="#f80" />
    <MyColorSwatchPickerItem color="#080" />
  </MyColorSwatchPicker>
</ColorSelector>