Inputs

Color Input

Text-field color entry with formatting, validation, and picker integration.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Properties

Format

Variant

Clearable

Disabled

Vue

<m-color-input
  label="Brand color"
  format="hex"
  variant="outlined"
  clearable
  :disabled="false"
  v-model="value"
 />

MColorInput API

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

MColorInput

Input family

src/runtime/components/ui/color-input

Props

NameTypeDefault

format

ColorFormat | 'auto''hex'

formats

ColorFormat[]() => ALL_FORMATS

commit`change` commits on Enter/blur; `input` commits every valid draft live.

'change' | 'input''change'

pickerWhether the swatch opens the picker popover.

booleantrue

swatches

ColorSwatch[]() => []

clearable

booleanfalse

disabled

booleanfalse

readonly

booleanfalse

required

booleanfalse

label

stringundefined

placeholder

stringundefined

helperText

stringundefined

variant

'filled' | 'outlined''filled'

path

stringundefined

name

stringundefined

error

booleanfalse

errorMessage

stringundefined

Slots

Events

@invalidstring

@changestring | null

@clearvoid

@openvoid

@closevoid