Form Color Select

Color select connected to Form context with server validation errors.

Installation

bash

pnpm dlx shadcn@latest add @cs/form-color-select

tsx

import { FormColorSelect } from "@/components/cs/form-color-select"

tsx

<FormColorSelect name="color" />

Color select connected to Form context with server validation errors.

Name	Type	Default	Description
colorTarget *	ColorTarget	-	Tailwind color utility prefix used for the selected value, or `raw-color` for direct CSS color values.
defaultValue	string \| null \| undefined	-	Initial selected value for uncontrolled usage.
label	string \| undefined	-	Visible field label.
name *	string	-	Form field name used for submission and validation errors.
onValueChange	((value: string \| null) => void) \| undefined	-	Called when the selected value changes.
options	LegacySelectOption[] \| undefined	-	Color options displayed in the menu. With a Tailwind utility `colorTarget`, custom option values must use `bg-*` classes, such as `bg-red-200 dark:bg-red-700`; the `bg-` prefix is replaced with `colorTarget` for the selected value. With `colorTarget="raw-color"`, values must be direct CSS colors, such as hex values like `#16a34a`, and are returned unchanged. The supplied color value is displayed as the swatch in both modes.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	-
placeholder	string \| undefined	-	Text displayed when no option is selected.
required	boolean \| undefined	-	Requires a selected value before the form can submit.
selectClassName	string \| undefined	-	Additional classes applied to the select trigger.
value	string \| (readonly string[] & string) \| undefined	-	Controlled selected value.