ColorWheel

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

Theme

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>
    </>
  );
}

API

<ColorWheel>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

ColorWheel

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

Name	Type
`outerRadius`	`number`
The outer radius of the color wheel.
`innerRadius`	`number`
The inner radius of the color wheel.
`isDisabled`	`boolean`
Whether the ColorWheel is disabled.
`children`	`ChildrenOrFunction<ColorWheelRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

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

Default className: react-aria-ColorWheel

Render Prop	CSS Selector
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the color wheel is disabled.
`state`	CSS Selector: `—`
State of the color wheel.

ColorWheelTrack

A color wheel track renders a circular gradient track.

Name	Type

Default className: react-aria-ColorWheelTrack

Render Prop	CSS Selector
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the color wheel is disabled.
`state`	CSS Selector: `—`
State of the color wheel.

ColorThumb

A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.

Name	Type
`children`	`ChildrenOrFunction<ColorThumbRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-ColorThumb

Render Prop	CSS Selector
`color`	CSS Selector: `—`
The selected color, excluding the alpha channel.
`isDragging`	CSS Selector: `[data-dragging]`
Whether this thumb is currently being dragged.
`isHovered`	CSS Selector: `[data-hovered]`
Whether the thumb is currently hovered with a mouse.
`isFocused`	CSS Selector: `[data-focused]`
Whether the thumb is currently focused.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the thumb is keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the thumb is disabled.

useColorWheel

ColorWheel

Value

API

ColorWheel

ColorWheelTrack

ColorThumb

Related pages