Skip to main content
The MtColorpicker component provides an interactive color picker with multiple color format outputs and alpha channel support.

​
Import

import { MtColorpicker } from '@meteroid/component-library';

​
Props

​
modelValue
string
The value of the colorpicker field (hex, rgb, or hsl).
​
label
string
A label for your colorpicker field.
​
colorOutput
'auto' | 'hex' | 'hsl' | 'rgb'
default:"'auto'"
Change the output value format. ‘auto’ outputs hex for opaque colors and rgba for transparent.
​
alpha
boolean
default:"true"
If activated, the color value can contain alpha values.
​
disabled
boolean
default:"false"
Determines if the field is disabled.
​
required
boolean
default:"false"
Determines if the field is required.
​
readonly
boolean
default:"false"
Determines if the field can be edited.
​
colorLabels
boolean
default:"true"
Toggle the labels above each field inside the colorpicker.
​
compact
boolean
default:"false"
Show the colorpicker in a compact mode.
​
applyMode
boolean
default:"false"
Use apply-mode to apply the color value on button click.
​
placeholder
string
Placeholder text to show when no color is selected.
​
helpText
string
A text that helps the user understand what this field does.
​
error
object
An error in your business logic related to this field.
​
zIndex
number | null
Z-index for the colorpicker dropdown.
​
isInherited
boolean
default:"false"
Toggles the inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.
​
disableInheritanceToggle
boolean
default:"false"
Determines the active state of the inheritance toggle.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the selected color value changes.
​
inheritance-restore
(event: unknown) => void
Emitted when inheritance is restored.
​
inheritance-remove
(event: unknown) => void
Emitted when inheritance is removed.

​
Usage

​
Basic Colorpicker

<script setup>
import { ref } from 'vue';
const color = ref('#0fcff5');
</script>

<template>
  <mt-colorpicker 
    v-model="color"
    label="Brand color"
  />
</template>

​
With Alpha Channel

<template>
  <mt-colorpicker 
    v-model="color"
    label="Background color"
    :alpha="true"
  />
</template>

​
Different Output Formats

<template>
  <div>
    <mt-colorpicker v-model="hexColor" color-output="hex" label="HEX" />
    <mt-colorpicker v-model="rgbColor" color-output="rgb" label="RGB" />
    <mt-colorpicker v-model="hslColor" color-output="hsl" label="HSL" />
  </div>
</template>

​
Compact Mode

<template>
  <mt-colorpicker 
    v-model="color"
    compact
  />
</template>

​
Apply Mode

<template>
  <mt-colorpicker 
    v-model="color"
    label="Theme color"
    apply-mode
  />
</template>

​
Accessibility

  • Color picker uses ARIA labels for all interactive elements
  • Keyboard navigation supported (arrow keys for hue/saturation/lightness)
  • Focus trap when colorpicker is open
  • Escape key closes the colorpicker
  • Color input validates format automatically
  • Screen reader friendly with proper ARIA attributes

Build docs developers (and LLMs) love

Get started for freeTalk to us