Form controls

ColorField

A color, typed as hex or picked from a set of swatches. It never draws the browser's own color input, which opens a picker no stylesheet reaches.

Typed

Without swatches it is a text field with the stored color drawn inside its start. It takes #2F6FEB, 2f6feb or the short #26E, with or without spaces around, and stores six upper-case digits after a #, so #26e is stored as #2266EE. The value changes when the reader leaves the field, and clearing the field stores an empty value.

Text that reads as no color is refused when the reader leaves the field, and the value keeps the last color. From then on the message follows what they type, so it clears as soon as the text reads as a color.

Accent color

Hex, such as #2F6FEB or #26E.

Stored: #2F6FEB

From swatches

With swatches the field is a radio group. The arrow keys move the pick from swatch to swatch, and Space picks the swatch in focus when none is picked yet. The value is the picked swatch's value, so a field can store a theme token's name in place of a hex and the color then follows the theme. Each swatch is named by its label on hover and to a screen reader. A ring keeps a swatch the color of the page in sight, and the picked one draws a thicker ring in the text color, so the pick never rests on the swatch's own color.

A color the theme no longer has

A stored value that no swatch carries any longer, such as a token a theme dropped, stays until the reader picks another. The field says so in place of its hint, and a form still sends the stored value, so saving the form for another reason never wipes the color.

Errors and forms

error shows the caller's own refusal in place of the field's, such as a message the server sent back. required marks the label with an asterisk. In the typed field, required and the hex pattern take part in the browser's form validation. A swatch group announces that it is required and leaves the check to the server. describedBy adds the ids of other elements that describe the field, such as the message a wrapping Field renders, and they are read after the field's own hint or error.

The package also exports normalizeHex for a host that reads hex itself, such as an import. It returns six upper-case digits after a #, or null for text that reads as no color.

API

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable. Six upper-case hex digits after a #, a swatch's value, or empty for none.
`label`	`string`	no default	The field's label, or the group's legend with swatches.
`hint`	`string`	no default	Helper text below the field. An error replaces it.
`error`	`string`	no default	The caller's own refusal, shown in place of the field's.
`describedBy`	`string`	no default	Ids of other elements that describe the field, read after the field's own hint or error.
`swatches`	`ColorSwatch[]`	no default	Offers these colors as a radio group in place of the text field.
`disabled`	`boolean`	`false`	Disables the field.
`required`	`boolean`	`false`	Marks the label with an asterisk. The typed field also takes part in form validation.
`id`	`string`	no default	The id of the text field, or of the group with swatches.
`name`	`string`	no default	The form name. A stored color that no swatch carries is sent under it through a hidden input.
`class`	`string`	no default	Extra classes on the field wrapper.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.

ColorSwatch

Prop	Type	Default	Description
`value` required	`string`	no default	What the field stores when this swatch is picked, such as a theme token's name.
`label` required	`string`	no default	Names the swatch to a screen reader and on hover.
`color` required	`string`	no default	What the swatch paints: any CSS color, such as #2F6FEB or var(--color-brand).