Components
CircularRadialSelect
The Circular Radial Select is a visually striking and interactive selection component built with shadcn UI, designed to arrange options in a circle around a central point. Users can pick items by clicking on circular knobs, each of which can be color-coded or styled individually, making it ideal for time pickers, color wheels, mood selectors, or other radial inputs. The component is fully configurable, allowing developers to adjust the circle’s radius, knob size, colors, and placeholder text, while maintaining accessibility via an underlying shadcn Select for keyboard and form support. Selected items are clearly highlighted, and the layout ensures consistent spacing and alignment regardless of the number of options, offering a unique, reusable, and engaging UI element for dashboards, design tools, or any app that benefits from radial selection.
Loading preview...
"use client";
import * as React from "react";
import { CircularRadialSelect, RadialOption } from "@/components/ui/circular-radial-select";
const colorOptions: RadialOption[] = [
{ value: "red", label: "R", color: "#ef4444" },
{ value: "orange", label: "O", color: "#f97316" },
{ value: "yellow", label: "Y", color: "#facc15" },
{ value: "green", label: "G", color: "#22c55e" },
{ value: "blue", label: "B", color: "#3b82f6" },
{ value: "indigo", label: "I", color: "#6366f1" },
{ value: "violet", label: "V", color: "#a855f7" },
];
export default function DemoCircularRadialSelect () {
const [selected, setSelected] = React.useState<string>("");
return (
<div className="p-8 flex flex-col gap-8 items-center">
<h1 className="text-xl font-medium">Circular Radial Select Demo</h1>
<CircularRadialSelect
options={colorOptions}
radius={120}
knobSize={40}
placeholder="Pick a color"
onChange={setSelected}
defaultValue=""
/>
</div>
);
};