ColorWheel

Import

import { ColorWheel } from '@darkcode-ui/react';

Usage

"use client";

import {ColorWheel} from "@darkcode-ui/react";

export function Basic() {

Anatomy

Import the ColorWheel component and access all parts using dot notation.

import { ColorWheel } from '@darkcode-ui/react';

export default () => (
  <ColorWheel>
    <ColorWheel.Track />
    <ColorWheel.Thumb />
  </ColorWheel>
);

Controlled

Pass value and onChange to control the selected hue.

"use client";

import {ColorWheel, parseColor} from "@darkcode-ui/react";
import {useState} from "react";

Disabled

Pass isDisabled to disable the wheel.

"use client";

import {ColorWheel} from "@darkcode-ui/react";

export function Disabled() {

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.

"use client";

import {ColorArea, ColorSwatch, ColorWheel, parseColor} from "@darkcode-ui/react";
import {useState} from "react";

Styling

CSS Classes

The ColorWheel component uses these CSS classes (View source styles):

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.

ColorWheel.Track

The circular gradient track. Wraps React Aria ColorWheelTrack.

ColorWheel.Thumb

The draggable thumb. Wraps React Aria ColorThumb.