DOM Studio

Component

Color input

<DomColorInput>

Native colour picker paired with a hex text field — both bound to the same value.

Playground

Try every prop live

Color input playground

Edit props in the inspector — picker and hex field share the same value.

Used for accents and links.

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

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

Used for primary buttons and links.

#0ea5e9

Usage

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'Hex colour value.

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
[
	{
		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' | falsestring'field'Render default field chrome, or false to render only the control while keeping form state wiring.

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