Note

This documentation describes the InputColor Vue component for native UI views, for Xml templates see input-color.

InputColor

A color picker input backed by the Wijmo WjInputColor control. Allows the user to select a color visually or type a hex/rgb value.

Import

import { InputColor } from '@neos/design-system'

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
modelValue	string \| null	null	Bound color value as a CSS color string (v-model)

Emits

Event	Payload	Description
update:modelValue	string \| null	Value change
aiApply / aiCancel	—	AI suggestion events
update:focused	boolean	Focus state change

Usage Examples

Basic color picker

<InputColor v-model="brandColor" label="Brand Color" />

Inside a form

<GridLayout columns="* *" gap="medium">
  <InputColor v-model="form.primaryColor" label="Primary Color" />
  <InputColor v-model="form.secondaryColor" label="Secondary Color" />
</GridLayout>