CataUiInputColor

A color input component that provides a dropdown color selector with customizable options.

Color input

<CataUiInputColor label="Color input" :options="options" v-model="myValue" />
<CataUiInputColor tooltip="Helpful tooltip" label="Required color" :options="options" required v-model="myValue" />
<CataUiInputColor label="Disabled color" :options="options" disabled v-model="myValue" />
<CataUiInputColor label="With error" error="Invalid color selection" :options="options" v-model="myValue" />
<CataUiInputColor label="Loading state" :options="options" :loading="true" v-model="myValue" />

Props

Prop	Description	Type	Default	Required
disabled	Disables the input	Boolean	false	false
error	Displays the string as an error message	String	''	false
label	The text label displayed above the input	String	''	false
loading	Shows a loading spinner when true	Boolean	false	false
options	An array of color options for the dropdown	Array		true
required	Displays a required indicator (*)	Boolean	false	false
tooltip	Tooltip text displayed on hover	String	''	false
v-model	Selected color value	String	null	true

Events

Event	Description	Parameters
update:modelValue	Emitted when the selected color changes	String (new color value)

Slots

Slot	Description
actions	Custom content for the input's action area (inherited from CataUiInput)

Data structure

// Selected color value
const myValue = ref('');

// Color options array
const options = [
    {
        value: '#fff', // Color value (hex code)
        label: 'White' // Display name for the color
    },
    {
        value: '#000',
        label: 'Black'
    },
    {
        value: '#f00',
        label: 'Red'
    },
    {
        value: '#ff0',
        label: 'Yellow'
    }
]

Usage Notes

The component displays color swatches next to the color names in the dropdown
Selecting a color will show a colored square in the input
The component supports both direct text input and selection from dropdown
Each option should have a value (hex code) and a label (display name)
Hex code values will show a colored square preview