Colorpicker

Source

<script setup lang="ts">
import { ref } from "vue";
import MtColorpicker from "@shopware-ag/meteor-component-library/MtColorpicker";

const value = ref("#0fcff5");
</script>

<template>
  <mt-colorpicker label="Colorpicker example" v-model="value" />
</template>

Usage

Colorpicker is a form field for choosing and editing a color value. Use it when users need to define a custom brand, accent, or interface color and a text input alone would make color editing harder or more error-prone. Use the alpha option when transparency is part of the value users need to control.

import { MtColorpicker } from "@shopware-ag/meteor-component-library";

Examples

Without alpha

<script setup lang="ts">
import { ref } from "vue";
import MtColorpicker from "@shopware-ag/meteor-component-library/MtColorpicker";

const value = ref("#0fcff5");
</script>

<template>
  <mt-colorpicker label="Solid color" v-model="value" :alpha="false" />
</template>

API reference

Props

Prop	Type	Default
`error` An error in your business logic related to this field.	`Record<string, any>`	`null`
`label` A label for your text field. Usually used to guide the user what value this field controls.	`string`	`null`
`required` Determines if the field is required.	`boolean`	`false`
`is-inheritance-field` Determines if the field is inheritable.	`boolean`	`false`
`is-inherited` Toggles the inheritance visualization.	`boolean`	`false`
`help-text` A text that helps the user to understand what this field does.	`string`	`null`
`disabled` Determines if the field is disabled.	`boolean`	`false`
`name`	`string`	`null`
`model-value` The value of the colorpicker field.	`string \| null`	`""`
`disable-inheritance-toggle` Determines the active state of the inheritance toggle.	`boolean`	`false`
`z-index`	`number \| null`	`null`
`readonly` Determines if the field can be edited	`boolean`	`false`
`color-output` Change the output value which gets emitted and shown in the field.	`"auto" \| "hex" \| "hsl" \| "rgb"`	`"auto"`
`alpha` If activated then the color value can contain alpha values	`boolean`	`true`
`color-labels` Toggle the labels above each field inside the colorpicker	`boolean`	`true`
`compact` Show the colorpicker in a compact mode	`boolean`	`false`
`apply-mode` Use apply-mode to apply the color value on button click	`boolean`	`false`
`placeholder`	`string`
`on-update:model-value`	`((...args: any[]) => any) \| undefined`
`on-inheritance-remove`	`((...args: any[]) => any) \| undefined`
`on-inheritance-restore`	`((...args: any[]) => any) \| undefined`

Exposed

Name	Type
`t`	`ComposerTranslation<{ en: { "mt-colorpicker": { apply: string; }; }; de: { "mt-colorpicker": { apply: string; }; }; }, "en" \| "de", RemoveIndexSignature<{ [x: string]: LocaleMessageValue<VueMessageType>; }>, never, "mt-colorpicker" \| "mt-colorpicker.apply", "mt-colorpicker" \| "mt-colorpicker.apply">`
`localValue`	`string \| { string: string; red: string; green: string; blue: string; alpha?: string \| undefined; }`
`visible`	`boolean`
`isDragging`	`boolean`
`userInput`	`null`
`luminanceValue`	`number`
`saturationValue`	`number`
`hueValue`	`number`
`alphaValue`	`number`
`hasFocus`	`boolean`
`trap`	`{ active: boolean; paused: boolean; activate: (activateOptions?: ActivateOptions \| undefined) => FocusTrap; deactivate: (deactivateOptions?: DeactivateOptions \| undefined) => FocusTrap; pause: (pauseOptions?: PauseOptions \| undefined) => FocusTrap; unpause: (unpauseOptions?: UnpauseOptions \| undefined) => FocusTrap; updateContainerElements: (containerElements: string \| HTMLElement \| SVGElement \| (string \| HTMLElement \| SVGElement)[]) => FocusTrap; } \| null`
`hueStep`	`number`
`alphaStep`	`number`
`colorValue`	`string \| { string: string; red: string; green: string; blue: string; alpha?: string \| undefined; }`
`integerAlpha`	`number`
`sliderBackground`	`string`
`isColorValid`	`boolean`
`previewColorValue`	`string`
`selectorBackground`	`string`
`redValue`	`number`
`greenValue`	`number`
`blueValue`	`number`
`rgbValue`	`string`
`hslValue`	`string`
`hexValue`	`string \| { string: string; red: string; green: string; blue: string; alpha?: string \| undefined; }`
`convertedValue`	`string \| { string: string; red: string; green: string; blue: string; alpha?: string \| undefined; }`
`selectorPositionX`	`string`
`selectorPositionY`	`string`
`selectorStyles`	`{ backgroundColor: string; top: string; left: string; }`
`componentClasses`	`{ "mt-colorpicker": boolean; "mt-colorpicker--compact": boolean; }`

Best practices

Use a clear label so users understand what surface or token the color affects.
Keep the emitted format consistent with the value your feature expects.
Enable alpha only when transparency is actually supported by the consuming feature.

Don't

Do not use Colorpicker when users only need to choose from a small fixed palette.
Do not enable alpha if the saved value ignores transparency.
Do not rely on color alone to explain what a setting changes.

Behavior

Colorpicker supports different emitted output formats through colorOutput, such as auto, hex, hsl, and rgb.
When alpha is enabled, the picker also exposes transparency controls and can emit values with opacity.
helpText, required, error, and inheritance-related props integrate with the shared field wrapper.

Accessibility

Always provide a visible label so users understand what the chosen color controls.
Do not rely only on the visual preview. The text value should remain understandable and editable.
If alpha is enabled, make sure nearby context explains how transparency affects the result.

Edit this pageorReport an issue

Collapsible

An interactive container that expands and collapses related content behind a trigger.

Data Table

A flexible table for displaying large datasets with pagination, sorting, filtering, and row selection.