ColorWheel

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

isDisabled

Example

ColorWheel.tsx

ColorWheel.css

Example

ColorWheel.tsx

ColorWheel.css

import {ColorWheel} from './ColorWheel';

<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 {parseColor} from 'react-aria-components';
import {ColorWheel} from './ColorWheel';
import {useState} from 'react';

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 style={{fontSize: 12}}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

ColorWheel

Value

API