StellarUI

<stellar-color-input>

Properties

Preview

Markup

Copy

<stellar-color-input
  label="Select a color"
  description="Choose a brand color"
  name="color"
  value="#6366f1"
  with-clear
>
</stellar-color-input>

API

Complete props, events, slots, and implementation notes for the shipped color input.

Props

Prop	Type	Default
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`name`	`string`	`''`
`value`	`string`	`''`
`disabled`	`boolean`	`false`
`readonly`	`boolean`	`false`
`required`	`boolean`	`false`
`with-clear`	`boolean`	`false`
`format`	`hex \| rgb \| hsl \| oklch`	`hex`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`swatches`	`array`	`[]`
`with-alpha`	`boolean`	`false`
`with-eye-dropper`	`boolean`	`false`
`hide-input`	`boolean`	`false`
`donut-ratio`	`number`	`0`

Events

Event	Source	Notes
`input`	host	Emitted while the user drags or changes slider, text, swatch, or clear state.
`change`	host	Emitted when an interaction is committed and by the clear action.

Slots

Slot	Notes
`label`	Optional authored label markup.
`description`	Optional authored description markup.
`error`	Optional authored error markup.

Notes

The public tag is `stellar-color-input`; it owns both the picker UI and the form-control contract.
It keeps the Stellar field metadata surface: `label`, `description`, and `error`, while submitting through a hidden native text input.
`value` accepts any browser-parseable CSS color and is normalized back to the requested `format` after interaction.
`with-alpha` and `with-eye-dropper` progressively add opacity and screen-pick affordances; `hide-input` removes the serialized text row when you do not want it visible.
`donut-ratio` is a 0-1 float controlling the hue ring's inner radius; the value triangle stays tangent to that edge.
`with-clear` blanks the current value and emits both `input` and `change`.