Vuance UI Kit

Inputs

Color Picker

Visual color editor with canvas, inputs, preview, and swatches.

Color Picker

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Properties

Hide canvas

Hide inputs

Hide preview

Hide swatches

Disabled

Vue

<m-color-picker
  :disabled="false"
  :hide-canvas="false"
  :hide-inputs="false"
  :hide-preview="false"
  :hide-swatches="false"
  v-model="value"
 />

MColorPicker API

Props, slots, and events are extracted from the current public UI Kit contract.

MColorPicker

Input family
src/runtime/components/ui/color-picker

Props

NameTypeDefault
formatsSelectable output formats. A single format hides the selector.
ColorFormat[]() => ALL_FORMATS
swatchesPalette entries (string or `{ value, label }`).
ColorSwatch[]() => []
disabled
booleanfalse
hideCanvas
booleanfalse
hideInputs
booleanfalse
hidePreview
booleanfalse
hideSwatches
booleanfalse

Slots

Events

@changestring | null
@invalidstring