Forms

Color Wheel

Circular hue picker built on react-aria-components and styled with the quebi design system. Drag the thumb around the ring to choose a hue; pairs with a color area for full color selection.

formcolorpickerwheelhueinteractive

Default

A hue wheel with an initial value. Drag the thumb around the ring.

Disabled

A disabled wheel dims the track and makes the thumb non-interactive.

Source

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

"use client"

import {
  ColorWheelTrack,
  ColorWheel as PrimitiveColorWheel,
  type ColorWheelProps as PrimitiveColorWheelProps,
} from "react-aria-components"
import { ColorThumb } from "@/components/color-thumb"

/**
 * ColorWheel — quebi design system
 *
 * A circular hue picker built on react-aria-components. The hue gradient on the
 * track is user data (the spectrum) and is left untouched; quebi tokens style
 * the disabled state and the thumb. Drag the thumb around the ring to pick a hue.
 */
export interface ColorWheelProps
  extends Omit<PrimitiveColorWheelProps, "outerRadius" | "innerRadius"> {}

export function ColorWheel(props: ColorWheelProps) {
  return (
    <PrimitiveColorWheel {...props} outerRadius={100} innerRadius={74}>
      <ColorWheelTrack
        className="disabled:bg-quebi-fg-subtle/40 forced-colors:disabled:bg-[GrayText]"
        style={({ defaultStyle, isDisabled }) => ({
          ...defaultStyle,
          background: isDisabled
            ? undefined
            : `${defaultStyle.background}, repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
        })}
      />
      <ColorThumb />
    </PrimitiveColorWheel>
  )
}