DOM Studio

Component

Vue Color Input Component

<DomColorInput>

A compact colour swatch that opens the native colour picker.

Playground

Try every prop live

Color input playground

Edit props in the inspector — the swatch stays bound to the same colour value.

#3b82f6

Used for accents and links.

Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomColorInput } from '@getdom/studio';

const data = reactive({
		"modelValue": "#3b82f6",
		"id": "",
		"name": "",
		"label": "Brand colour",
		"description": "Used for accents and links.",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field"
	});
</script>

<template>
	<DomColorInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Live preview

#0ea5e9

Used for primary buttons and links.

#0ea5e9

Usage

Vue

vue
<script setup>
import { DomColorInput } from '@getdom/studio/vue';
import { ref } from 'vue';
const accent = ref('#0ea5e9');
</script>

<template>
  <DomColorInput
    v-model="accent"
    label="Accent colour"
    description="Used for primary buttons and links."
  />
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestringstring'#000000'CSS colour value. Hex and OKLCH values are supported.

Field props

NameTypeTSDefaultDescription
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
placeholderstringstring''Placeholder shown when the control is empty.
requiredbooleanbooleanfalseMark the field as required.
disabledbooleanbooleanfalseDisable field interaction.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
ts
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		[]Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | 'none' | falsestring'field'Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Color input.props and inline _edit hints.