DOM Studio

Component

Money input

<DomMoneyInput>

A field-compatible decimal input with currency chrome for prices, budgets, invoices, and payouts.

Playground

Try every prop live

Money input playground

Use the currency chrome for display, then transform the decimal value in your form or backend layer.

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

const data = reactive({
	  "modelValue": "149.00",
	  "id": "",
	  "name": "",
	  "label": "Price",
	  "description": "",
	  "placeholder": "",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": [],
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "currency": "GBP",
	  "locale": "en-GB",
	  "prefix": "",
	  "suffix": "/ mo",
	  "min": null,
	  "max": null,
	  "step": 0.01,
	  "textAlign": "right"
	});
</script>

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

Demo

Invoice amount

Keep calculations in the parent so currency parsing and billing policy stay application-owned.

Stored as a decimal string.

Preview total

£1788.00 / month

InvoiceAmount.vuevue
<script setup>
import { computed, ref } from 'vue';
import { DomMoneyInput } from '../../../lib/vue';

const amount = ref('149.00');
const seats = ref('12');
const monthlyTotal = computed(() => {
	const price = Number(amount.value);
	const quantity = Number(seats.value);
	if (!Number.isFinite(price) || !Number.isFinite(quantity)) return '0.00';
	return (price * quantity).toFixed(2);
});
</script>

<template>
	<div class="w-full max-w-xl rounded-lg border border-border bg-canvas p-5 shadow-sm">
		<div class="grid gap-4 sm:grid-cols-2">
			<DomMoneyInput
				v-model="amount"
				label="Seat price"
				description="Stored as a decimal string."
				currency="GBP"
			/>
			<label class="grid gap-1 text-sm">
				<span class="font-medium text-canvas-fg">Seats</span>
				<input v-model="seats" class="skin-input h-10" inputmode="numeric" />
			</label>
		</div>
		<div class="mt-5 rounded-md border border-border bg-secondary/40 p-4">
			<p class="text-xs font-semibold uppercase text-muted-fg">Preview total</p>
			<p class="mt-1 text-2xl font-semibold tracking-tight text-canvas-fg">£{{ monthlyTotal }} / month</p>
		</div>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestring | numberstring''Current decimal amount.
currencystringstring'GBP'ISO currency code used for the visual prefix.
localestringstring'en-GB'Locale used to resolve the currency symbol.
prefixstringstring''Prefix override. Defaults to the currency symbol.
suffixstringstring''Optional suffix such as per month.
minnumbernumber—Minimum numeric value.
maxnumbernumber—Maximum numeric value.
stepnumbernumber0.01Native numeric step hint.
textAlign'left' | 'right'string'right'Input text alignment.

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 Money input.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValuestring | numberFired when the amount changes.
@focusFocusEventFired when the input receives focus.
@blurFocusEventFired when the input loses focus.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.