ColorWheel

A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.

size

isDisabled

import {ColorWheel} from '@react-spectrum/s2';

<ColorWheel />

Value

Use the value or defaultValue prop to set the color value. The value may be a string or Color object, parsed using the parseColor function.

The onChange event is called as the user drags, and onChangeEnd is called when the thumb is released. These are always called with a Color object.

onChange value: #FFD400
onChangeEnd value: #FFD400

import {ColorWheel} from '@react-spectrum/s2';
import {useState} from 'react';
import {parseColor} from '@react-stately/color';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorWheel
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
      <pre className={style({font: 'body'})}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

API

Name	Type	Default
`size`	`number`	Default: `192`
`isDisabled`	`boolean`	Default: —
Whether the ColorWheel is disabled.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`value`	`T`	Default: —
The current value (controlled).
`defaultValue`	`string \| Color`	Default: `'hsl(0, 100%, 50%)'`
The default value (uncontrolled).
`onChange`	`(value: Color) => void`	Default: —
Handler that is called when the value changes, as the user drags.
`onChangeEnd`	`(value: Color) => void`	Default: —
Handler that is called when the user stops dragging.