# ColorWheel
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/color-wheel
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(colors)/color-wheel.mdx
> A circular slider for selecting the hue of a color value
***
## Import
```tsx
import { ColorWheel } from '@darkcode-ui/react';
```
## Usage
```tsx
"use client";
import {ColorWheel} from "@darkcode-ui/react";
export function Basic() {
return (
);
}
```
## Anatomy
Import the ColorWheel component and access all parts using dot notation.
```tsx
import { ColorWheel } from '@darkcode-ui/react';
export default () => (
);
```
## Controlled
Pass `value` and `onChange` to control the selected hue.
```tsx
"use client";
import {ColorWheel, parseColor} from "@darkcode-ui/react";
import {useState} from "react";
export function Controlled() {
const [color, setColor] = useState(parseColor("hsl(50, 100%, 50%)"));
return (
Current hue: {color.toString("hsl")}
);
}
```
## Disabled
Pass `isDisabled` to disable the wheel.
```tsx
"use client";
import {ColorWheel} from "@darkcode-ui/react";
export function Disabled() {
return (
);
}
```
## With ColorArea
Combine a `ColorWheel` for hue with a centered `ColorArea` for saturation and brightness to
build a complete color picker. Both components share the same controlled color value.
```tsx
"use client";
import {ColorArea, ColorSwatch, ColorWheel, parseColor} from "@darkcode-ui/react";
import {useState} from "react";
export function WithColorArea() {
const [color, setColor] = useState(parseColor("hsl(220, 100%, 50%)"));
return (
{color.toString("hex")}
);
}
```
## Related Components
- **ColorArea**: 2D color picker for selecting colors from a gradient area
- **ColorSlider**: Slider for adjusting individual color channel values
- **ColorPicker**: Composable color picker with popover
## Styling
### CSS Classes
The ColorWheel component uses these CSS classes ([View source styles](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/color-wheel.css)):
#### Base Classes
- `.color-wheel` - Root wrapper
- `.color-wheel__track` - Circular hue gradient track
- `.color-wheel__thumb` - Draggable thumb
### Interactive States
- **Focus**: `[data-focus-visible="true"]`
- **Dragging**: `[data-dragging="true"]`
- **Disabled**: `[data-disabled="true"]`
## API Reference
### ColorWheel
Inherits from [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string \| Color` | - | The current color value (controlled) |
| `defaultValue` | `string \| Color` | `'hsl(0, 100%, 50%)'` | The default color value (uncontrolled) |
| `onChange` | `(color: Color) => void` | - | Handler called as the value changes |
| `onChangeEnd` | `(color: Color) => void` | - | Handler called when the user stops dragging |
| `outerRadius` | `number` | `100` | The outer radius of the wheel |
| `innerRadius` | `number` | `74` | The inner radius of the wheel (the hole) |
| `isDisabled` | `boolean` | `false` | Whether the wheel is disabled |
### ColorWheel.Track
The circular gradient track. Wraps React Aria `ColorWheelTrack`.
### ColorWheel.Thumb
The draggable thumb. Wraps React Aria `ColorThumb`.