ColorInput

A labeled native color picker paired with a synced hex field for exact keyboard entry. Typed values commit on change, validated and normalized.

Import

import { ColorInput } from "@hyzer-labs/ui"

Demo

The swatch is the native picker. The hex field commits on blur or Enter: type f60 and it normalizes to #ff6600, while an entry it cannot read restores the current value. Picks and typed values stay in sync.

Disc color

let discColor = $state('#ff6b35');

<ColorInput name="disc-color" label="Disc color" bind:value={discColor} />

showInput={false} swaps the hex field for a read-only readout. The value stays visible without inviting edits, the same as the slider's.

Scorecard accent

<ColorInput name="accent" label="Scorecard accent" value="#2563eb" showInput={false} />

description and error are announced with the field: both chain into aria-describedby. Error and disabled are also field states, and the wrapper's data-state reflects them, with error winning.

Glow plastic color

Pick something that shows up after sundown.

Stamp foil

That foil is out of stock.

Jersey color

League color (locked)

<ColorInput
	name="glow"
	label="Glow plastic color"
	value="#a3e635"
	description="Pick something that shows up after sundown."
/>

<ColorInput name="stamp" label="Stamp foil" error="That foil is out of stock." />
<ColorInput name="required" label="Jersey color" required />
<ColorInput name="locked" label="League color (locked)" value="#2563eb" disabled />

Props

Name	Type	Default	Note
`name`	`string`	`—`	Required. Form field name.
`label`	`string`	`—`	Required. Always in the DOM; sr-only with hideLabel.
`value`	`string`	`'#000000'`	Bindable. The platform normalizes to 7-char lowercase hex.
`showInput`	`boolean`	`true`	Renders the exact-entry hex field beside the swatch.
`inputLabel`	`string`	`${label} (hex value)`	Accessible name for the hex field.
`description`	`string`	`—`	Help text below the label.
`error`	`string`	`—`	Inline error message; sets the error state.
`required`	`boolean`	`false`	Label indicator only.
`disabled`	`boolean`	`false`
`hideLabel`	`boolean`	`false`
`class`	`string`	`—`	Merged after the hz-field hz-field--color classes.

Theme hooks

What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.

Root class: .hz-field hz-field--color

Data attributes

Hook	Values	Styles
`data-state`	`'default' \| 'error' \| 'disabled'`	The universal field state hook, on the root. Precedence is fixed: error beats disabled.

Custom properties

Hook	Values	Styles
`--hz-color-swatch-size`	`<length> — default 2rem`	The swatch height; its width follows at 1.5×, so the 3:2 shape is fixed. Declared on input.hz-color — set it there or deeper, not on the .hz-field root, or the local declaration wins over your inherited value.

Part classes

Hook	Values	Styles
`.hz-field-label`	`child element`	The label.
`.hz-field-required`	`child element`	The required marker.
`.hz-field-description`	`child element`	The hint text.
`.hz-field-error`	`child element`	The error message.
`.hz-color-row`	`child element`	The swatch-and-readout row.
`.hz-color`	`the color input`	The native swatch.
`.hz-color-hex`	`child element`	The editable hex field.
`.hz-color-value`	`child element`	The read-only hex readout.

The color input is the labeled (id/for), named, form-participating control. Activating it opens the platform picker, which owns the picking experience.

The hex field is there for typing an exact value. It has its own accessible name (inputLabel) and no name, so it never submits.

description and error chain into aria-describedby, description first, and an error sets aria-invalid. required renders the label indicator only, since a color input always holds a value.

Do not let color alone carry meaning; the visible hex value helps.