ColorInputRoot

ColorInputRoot is a headless helper for color input UIs.

It derives a hex value from a color and exposes update helpers for hex and full-color changes.

Props

Prop	Default	Type
color* Current color value.	—	Color
editable Whether the consumer should present the value as editable.	—	boolean | undefined

Events

Event	Payload	Description
update Emitted when the color changes.	color: Color	Emitted when the color changes.

Slots

Slot	Props	Description
default Main color input render contract.	{ color: Color, editable: boolean, hex: string, updateFromHex: (value: string) => void, updateColor: (color: Color) => void }	Main color input render contract.

Example

<ColorInputRoot :color="color" @update="color = $event" v-slot="{ hex, updateFromHex }">
  <input :value="hex" @input="updateFromHex(($event.target as HTMLInputElement).value)" />
</ColorInputRoot>

Related APIs

• ColorPickerRoot