ColorField

A labeled, described, and validated color field in one call.

View code

<form mix={[vstack({ gap: 5, align: "stretch" }), is("100%"), maxIs("22rem")]}>
	<ColorField
		label="Brand"
		name="brandColor"
		format="hex"
		defaultValue="#3b82f6"
		description="Buttons, links and focus rings."
		mix={[colorPreview()]}
	/>
	<ColorField
		label="Surface"
		name="surfaceColor"
		format="rgb"
		defaultValue="rgb(24 24 27)"
		description="Panel and sheet backgrounds."
		mix={[colorPreview()]}
	/>
	<ColorField
		label="Danger"
		name="dangerColor"
		format="hsl"
		defaultValue="hsl(0 84% 60%)"
		description="Destructive actions and failed states."
		errorMessage="This one has not passed contrast against the surface yet."
		mix={[colorPreview()]}
	/>
</form>

Installation

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

npm add @sdxc/ui

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

Usage

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

Composes Label, an Input constrained by format's native pattern, a live ColorSwatch preview of the resolved value, and any Description or FieldError, wired to this instance's own id.

Examples

<ColorField
	label={t("form.brandColor.label")}
	name="brandColor"
	format="rgb"
	defaultValue="rgb(16, 185, 129)"
	description={t("form.brandColor.hint")}
/>

<ColorField
	label={t("form.themeColor.label")}
	name="themeColor"
	format="hsl"
	value="hsl(210, 90%, 55%)"
	errorMessage={t("form.themeColor.invalid")}
/>

Props

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

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted.
`label`	`RemixNode`	The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier.
`description?`	`RemixNode`	Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`.
`errorMessage?`	`RemixNode`	Validation message rendered through FieldError beneath the control, referenced by its `aria-describedby`; its presence alone marks `aria-invalid`. Inside a Form carrying `issues`, this prop wins.
`autoFocus?`	`boolean`	Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, so a server round-trip lands keyboard focus on the first problem while staying script-free.
`format?`	`"hex" \| "rgb" \| "hsl"`	Notation the control's `pattern` constrains typed entry to. Defaults to DEFAULT_FORMAT.
`name?`	`string`	Native `name` submitted with an enclosing form.
`value?`	`string`	Current value, as a literal color string in `format`'s notation, for a control a consumer tracks itself. This same string paints the preview directly.
`defaultValue?`	`string`	Initial value, as a literal color string in `format`'s notation, for a control left to the platform's own uncontrolled state. This same string paints the preview directly whenever `value` is unset.
`placeholder?`	`string`	Placeholder copy shown while the control is empty.
`required?`	`boolean`	Marks the control required for its enclosing form.
`disabled?`	`boolean`	Marks the control inert and excluded from the tab order.
`readOnly?`	`boolean`	Marks the control's value fixed, while keeping it focusable and included in form submission.
`autoComplete?`	`string`	Native autofill hint.
`parts?`	`PartsProps`	Per-part styling for this wrapper's internally composed elements.

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

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables.
`Format`	`"hex" \| "rgb" \| "hsl"`	Notation the control's typed value is constrained to through its native `pattern`: `"hex"` for `#rgb`/`#rrggbb` and their alpha forms, `"rgb"` for `rgb()`/`rgba()`, and `"hsl"` for `hsl()`/`hsla()`.