Color choice
A keyboard-friendly palette that gives a single color a clear selected state.
Workspace accentCobalt
Your workspace, your color.
Implementation
1"use client";2 3import { useId, useState, type KeyboardEvent } from "react";4import { Check } from "lucide-react";5 6export type ColorOption = { name: string; value: string };7export type ColorChoiceProps = {8 colors: ColorOption[];9 label?: string;10 value?: string;11 defaultValue?: string;12 name?: string;13 onChange?: (value: string) => void;14};15 16/** A labeled single-choice color control with native form submission support. */17export function ColorChoice({18 colors,19 label = "Accent color",20 value,21 defaultValue,22 name,23 onChange,24}: ColorChoiceProps) {25 const labelId = useId();26 const [internalValue, setInternalValue] = useState(27 defaultValue ?? colors[0]?.value ?? "",28 );