Number Field

Source

<script setup lang="ts">
import { ref } from "vue";
import MtNumberField from "@shopware-ag/meteor-component-library/MtNumberField";

const quantity = ref(0);
</script>

<template>
  <mt-number-field v-model="quantity" label="Quantity" :step="1" number-type="int" />
</template>

Usage

Number Field is a numeric input control for values that should be numeric, such as quantities, counts, percentages, or other values that benefit from step-based input. Use it when min and max limits should guide valid input.

import { MtNumberField } from "@shopware-ag/meteor-component-library";

Examples

Disabled

<script setup lang="ts">
import MtNumberField from "@shopware-ag/meteor-component-library/MtNumberField";
</script>

<template>
  <mt-number-field label="Quantity" :step="1" number-type="int" disabled :model-value="42" />
</template>

Error

<script setup lang="ts">
import { ref } from "vue";
import MtNumberField from "@shopware-ag/meteor-component-library/MtNumberField";

const quantity = ref(0);
</script>

<template>
  <mt-number-field
    v-model="quantity"
    label="Quantity"
    :step="1"
    number-type="int"
    :error="{ detail: 'Enter a quantity of at least 1.' }"
  />
</template>

Hint

<script setup lang="ts">
import { ref } from "vue";
import MtNumberField from "@shopware-ag/meteor-component-library/MtNumberField";

const quantity = ref(0);
</script>

<template>
  <mt-number-field v-model="quantity" label="Quantity" :step="1" number-type="int">
    <template #hint>Whole numbers only.</template>
  </mt-number-field>
</template>

API reference

Props

Prop	Type	Default
`copyable` Toggles the copy function of the text field.	`boolean`	`false`
`error` An error in your business logic related to this field.	`Record<string, any>`	`null`
`label` A label for your text field. Usually used to guide the user what value this field controls.	`string`	`null`
`required` Determines if the field is required.	`boolean`	`false`
`is-inheritance-field` Determines if the field is inheritable.	`boolean`	`false`
`is-inherited` Toggles the inheritance visualization.	`boolean`	`false`
`help-text` A text that helps the user to understand what this field does.	`string`	`null`
`disabled` Determines if the field is disabled.	`boolean`	`false`
`placeholder` A placeholder text being displayed if no value is set.	`string`	`""`
`name`	`string`	`null`
`size` The size of the text field.	`string`	`"default"`
`model-value` The value of the text field. The value of the number field.	`number`	`null`
`disable-inheritance-toggle` Determines the active state of the inheritance toggle.	`boolean`	`false`
`copyable-tooltip` If set to true the tooltip will change on successful copy.	`boolean`	`false`
`max-length` If set to a value a character counter will be displayed.	`number`	`undefined`
`id-suffix`	`string`	`""`
`number-type` Defines if the number should be a floating point number or integer.	`"float" \| "int"`	`"float"`
`step` Defines the amount of which the number is increased or decreased per step.	`number`	`null`
`min` Defines the minimum value of the number.	`number`	`null`
`max` Defines the maximum value of the number.	`number`	`null`
`digits` Defines how many digits should be displayed after the decimal point.	`number`	`2`
`fill-digits` Defines if digits should be filled with zeros if the value is smaller than the minimum value.	`boolean`	`false`
`allow-empty` Defines if the field can be empty.	`boolean`	`undefined`
`number-align-end` Defines if the number should be aligned to the end of the input field.	`boolean`	`false`
`show-controls` Defines if the control arrows should be visible.	`boolean`	`true`
`on-update:model-value`	`((...args: any[]) => any) \| undefined`
`on-change`	`((...args: any[]) => any) \| undefined`
`on-inheritance-remove`	`((...args: any[]) => any) \| undefined`
`on-inheritance-restore`	`((...args: any[]) => any) \| undefined`
`on-blur`	`((...args: any[]) => any) \| undefined`
`on-focus`	`((...args: any[]) => any) \| undefined`
`on-input-change`	`((...args: any[]) => any) \| undefined`

Exposed

Name	Type
`t`	`ComposerTranslation<{ en: { increaseButton: string; decreaseButton: string; }; de: { increaseButton: string; decreaseButton: string; }; }, "en" \| "de", RemoveIndexSignature<{ [x: string]: LocaleMessageValue<VueMessageType>; }>, never, "increaseButton" \| "decreaseButton", "increaseButton" \| "decreaseButton">`
`currentValue`	`string \| number`
`hasFocus`	`boolean`
`rawUserInput`	`string \| null`
`hasError`	`boolean`
`hasDisabledInput`	`boolean`
`realStep`	`number`
`realMinimum`	`number \| null`
`realMaximum`	`number \| null`
`stringRepresentation`	`string`
`controlClasses`	`{ "mt-field__controls--disabled": boolean; "mt-field__controls--has-error": boolean; "mt-field__controls--small": boolean; }`
`allowEmptyWithDefault`	`boolean`
`onInput`	`((event: Event) => void) & ((event: Event) => void)`

Best practices

Use a clear label that explains what the number represents.
Configure step, min, and max when the range is known.
Choose the right numberType for integer or decimal input.

Don't

Do not use Number Field for values that are identifiers but look numeric.
Do not use it when users need to pick both a number and a unit together.
Do not hide important limits from users if the field enforces them.

Behavior

Number Field builds on the shared field base and adds numeric parsing, stepping, and optional arrow controls.
numberType, digits, fillDigits, and numberAlignEnd help tune how numeric values are entered and displayed.
showControls can show increase and decrease buttons for step-based adjustment.

Accessibility

Always provide a visible label that explains the meaning of the number.
Use help text when users need context about valid ranges, units, or rounding.
Make sure any min, max, or step behavior matches the expectations shown in the UI.

Text Field: when numeric-looking content should stay as plain text.

Edit this pageorReport an issue

Modal

A dialog that sits above the current page to focus attention on a single task or decision.

Pagination

A control for moving through larger result sets one page at a time.