Color Input

Color inputs combine a swatch with a text field so users can both pick and inspect a color value.

Basic Usage

A color input should make the current color visible while still exposing the editable text value.

Resolved Values

Different input shapes are useful to show because users will often paste shorthand values while the control resolves and normalizes them.

Sizes

The color input should scale cleanly across the shared size system.

States

Show invalid, read-only, and disabled states when the color value participates in form validation. A read-only input keeps its value visible and copyable but blocks edits to both the swatch and hex field.

API

Props

Name	Description
ariaLabel	Type string | null Default null
customError	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue	Type string
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fitCell	Type boolean Default false
invalid	Type boolean Default false
isInvalid	Alias for invalid.
name	Name submitted with form data. Type string | null Default null
readonly	Type boolean Default false
readOnly	Alias for readonly.
required	Marks the control as required for form submission. Type boolean Default false
size	Type PkColorInputSize Default default
value	Type string

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
onChange	—
onInput	—
onPkChange	Some facades also expose value sugar via onChange.

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)

CSS Parts

Name	Description	CSS selector
input	Hex text input	::part(input)
swatch	Swatch container	::part(swatch)