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

Attributes & Properties

Name	Description
ariaLabel aria-label	Type string | null Default null
customError custom-error	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue default-value	Type string
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fitCell fit-cell	Type boolean Default false
invalid	Type boolean Default false
name	Name submitted with form data. Type string | null Default null
readonly	Type boolean Default false
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
change	—
input	—
pk-change	—

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)