[ @sdxc/ui ]

ColorWheel

A circular hue picker.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

Accent hue

210°#318fed

Drag around the ring, or focus it and step with the arrow keys.

View code

let hue = 210;

<div mix={[hstack({ gap: 5, align: "center" })]}>
	<ColorWheel
		aria-label="Accent hue"
		name="accentHue"
		value={hue}
		step={1}
		mix={[
			colorWheelDrag(),
			on<HTMLDivElement, "ui:color-wheel-change">("ui:color-wheel-change", (event) => {
				hue = event.hue;
				void handle.update();
			}),
		]}
	/>

	<div mix={[vstack({ gap: 3, align: "start" })]}>
		<Label>Accent hue</Label>
		<div mix={[hstack({ gap: 2, align: "center" })]}>
			<ColorSwatch size="lg" shape="circle" value={tint} />
			<div mix={[vstack({ gap: 0, align: "start" })]}>
				<span mix={[font("mono"), text("sm"), weight("medium")]}>{Math.round(hue)}°</span>
				<span mix={[font("mono"), text("xs"), fg("neutral")]}>{tint}</span>
			</div>
		</div>
		<p mix={[text("sm"), fg("neutral")]}>
			Drag around the ring, or focus it and step with the arrow keys.
		</p>
	</div>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

import { ColorWheel } from "@sdxc/ui";

Renders a root <div> around a single <input type="range"> across hue's 0–360 domain, carrying every accessibility and form semantic this wheel exposes; colorWheelDrag() enables the ring rendering.

Examples

Locked by an admin

Lock the accent hue210°

View code

let hue = 210;
let isLocked = true;

<div mix={[hstack({ gap: 5, align: "center" })]}>
	<ColorWheel
		aria-label="Accent hue"
		value={hue}
		name="hue"
		disabled={isLocked}
		mix={[
			colorWheelDrag(),
			on<HTMLDivElement, "ui:color-wheel-change">("ui:color-wheel-change", (event) => {
				hue = event.hue;
				void handle.update();
			}),
		]}
	/>

	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<Label>
			<Switch
				name="lockHue"
				checked={isLocked}
				mix={[
					on<HTMLInputElement, "change">("change", (event) => {
						isLocked = event.currentTarget.checked;
						void handle.update();
					}),
				]}
			/>
			Lock the accent hue
		</Label>
		<span mix={[font("mono"), text("sm"), fg("neutral")]}>{Math.round(hue)}°</span>
	</div>
</div>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`value?`	`number`	Current hue, in degrees `0`–`360`, for a wheel a consumer tracks itself.
`defaultValue?`	`number`	Starting hue, in degrees `0`–`360`, for a wheel left to the platform's own uncontrolled state.
`step?`	`number`	Degrees a single keypress moves the value by. Defaults to DEFAULT_STEP.
`name?`	`string`	Native `name` submitted with an enclosing form.
`form?`	`string`	Native `id` of the form the underlying hue input associates with, when it sits outside that form's own markup.
`disabled?`	`boolean`	Marks the underlying hue input inert and excluded from the tab order.
`parts?`	`PartsProps`	Per-part styling for this wrapper's internally composed hue input.

Also accepts everything in Omit<TagProps<"div">, "children">.