A Color input opens the browser’s own color picker from its chip, submits with its form under name and joins the Field around it. Reach for the Color picker widget instead when people need precise channels, formats, harmonies or palettes.
Inline
variant="inline" shows the label at the start of a compact row and, at the end, the chip and the color as text, so stacked rows of settings line up with inline Inputs and Selects. Type a color in any CSS notation and press Enter, or leave the text, to apply it; text that is no color goes back to the current one.
Inline
Default density
Compact density
Restart from the initial state
Show the copyable source
format sets the notation of the value and of its text; any CSS color goes in. alpha keeps transparency: the chip shows it over a checkerboard, and a color picked in a browser picker without alpha keeps the current one.
Formats and alpha
Default density
Compact density
Restart from the initial state
Show the copyable source
required asks for a color before the form submits, and a form reset brings back default-value. An input with no color shows an empty checkerboard.
In a form
Default density
Compact density
Restart from the initial state
Show the copyable source
<form style="display:grid;gap:var(--tp-space-3);max-inline-size:20rem;margin-inline:auto">
<tp-field label="Brand color" description="Used for buttons and links.">
<tp-color-input name="brand" variant="inline" required></tp-color-input>
</tp-field>
<tp-button type="reset" variant="outline" style="justify-self:start">Reset</tp-button>
</form>
Disabled and read-only
disabled takes the input out of the form and the tab order. readonly keeps it focusable and submitted, but the chip no longer opens the picker and the text cannot change.
Disabled and read-only
Default density
Compact density
Restart from the initial state
Show the copyable source
picker="none" turns the chip into a button that never opens the browser’s picker, so another picker can open instead. The Color picker widget uses it for its popup trigger, and takes an inline Color input in its trigger slot to show the color as a row.
Right-to-left
The row follows the writing direction: the label sits at the start and the chip and text at the end.
Right-to-left
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptiondefault-valuedefaultValuestring | undefined—The starting color of an uncontrolled input, in any CSS notation; form reset returns to it.formatformatColorFormat'hex'The notation the value and the value text use; any CSS color goes in.alphaalphabooleanfalseKeeps the alpha channel; without it every value is opaque.pickerpickerColorInputPicker'native'native opens the browser's color picker from the swatch. none makes the swatch a button
that never opens it, so another picker, such as a Color picker popup, can own the color.variantvariantColorInputVariant'default'inline shows the label, the value text and the chip in one compact row.sizesizeColorInputSize'default'Height of the swatch and the row, matching Input's sizes.show-swatchshowSwatchbooleantrueShows the chip in an inline row; the chip stays while the value text is hidden.show-valueshowValuebooleantrueShows the editable value text in an inline row.labellabelstring''Accessible name when no Field labels the input, and the label an inline input shows.
Properties
PropertyTypeDefaultDescriptiononValueChange((event: TpValueChangeEvent<string>) => void) | undefined—Called with each proposed value before tp-value-change; a controlled owner accepts it by
setting value.onValueCommittedColorInputValueCommitCallback | undefined—Called with each committed value when an interaction settles, before tp-value-commit.controlledread-onlyboolean—Whether the application controls value.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<string>Cancelable proposal of a new color while the picker reports one, or when typed text commits; detail.value, detail.previousValue and detail.reason.tp-value-commitTpValueCommitEvent<string>When an interaction settles: the picker closes, or typed text commits.tp-field-valueCustomEvent<{ value: string; previousValue: string; reason: ChangeReason; }>After a value commits; an enclosing Field tracks its dirty state from it.
Methods
MethodReturnsDescriptionsetValue(value, reason, sourceEvent?)booleanProposes a color in any CSS notation and commits it; returns whether it was accepted.
CSS parts
PartDescription::part(color-input)The wrapper around the swatch or the inline row.::part(color-input-chip)The current color painted over a transparency checker.::part(color-input-control)The native color input covering the swatch, or a button with picker="none"; it is transparent, so the swatch shows its focus ring.::part(color-input-label)The label at the start of an inline Color input's row.::part(color-input-row)The row of an inline Color input around its label, value text and chip.::part(color-input-swatch)The pressable frame around the chip that opens the picker.::part(color-input-value)The editable value text in an inline row, an Input joined into the row.
Related
Components, widgets and patterns that use this one.