ColorWheel
A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
Basic Usage
"use client";
import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";
/* BASIC COLOR WHEEL EXAMPLE */
export const Example1: React.FC = () => {
return <ColorWheel defaultValue={parseColor("hsl(30, 100%, 50%)")} />;
};
Controlled
Use the value and onChange props to control the color value.
#00FFFF
Hue: 180°
"use client";
import { useState } from "react";
import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";
/* CONTROLLED COLOR WHEEL WITH VALUE DISPLAY */
export const Example2: React.FC = () => {
const [color, setColor] = useState(parseColor("hsl(180, 100%, 50%)"));
return (
<div className="flex items-center gap-6">
<ColorWheel value={color} onChange={setColor} />
<div className="flex items-center gap-3">
<div
className="size-12 rounded-md border shadow-sm"
style={{ backgroundColor: color.toString("css") }}
/>
<div className="text-sm">
<p className="font-mono font-medium">
{color.toString("hex")}
</p>
<p className="text-muted-foreground font-mono">
Hue: {Math.round(color.getChannelValue("hue"))}°
</p>
</div>
</div>
</div>
);
};
Disabled
"use client";
import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";
/* DISABLED COLOR WHEEL */
export const Example3: React.FC = () => {
return (
<ColorWheel
defaultValue={parseColor("hsl(200, 100%, 50%)")}
isDisabled
/>
);
};
Component Code
"use client";
import {
ColorWheel as AriaColorWheel,
ColorWheelProps as AriaColorWheelProps,
ColorWheelTrack,
} from "react-aria-components";
import { ColorThumb } from "@repo/ui/components/color-thumb";
export interface ColorWheelProps
extends Omit<AriaColorWheelProps, "outerRadius" | "innerRadius"> {
outerRadius?: number;
innerRadius?: number;
}
export const ColorWheel: React.FC<ColorWheelProps> = ({
outerRadius = 100,
innerRadius = 75,
...props
}) => {
return (
<AriaColorWheel
data-slot="color-wheel"
outerRadius={outerRadius}
innerRadius={innerRadius}
{...props}
>
<ColorWheelTrack
className="data-disabled:bg-muted"
style={({ defaultStyle, isDisabled }) => ({
...defaultStyle,
background: isDisabled
? undefined
: defaultStyle.background,
})}
/>
<ColorThumb />
</AriaColorWheel>
);
};