Skip to main content
The MtNumberField component provides a specialized input for numeric values with optional controls and validation.

​
Import

import { MtNumberField } from '@meteroid/component-library';

​
Props

​
modelValue
number | null
The value of the number field.
​
label
string
A label for your number field.
​
numberType
'float' | 'int'
default:"'float'"
Defines if the number should be a floating point number or integer.
​
step
number
Defines the amount by which the number is increased or decreased per step.
​
min
number
Defines the minimum value of the number.
​
max
number
Defines the maximum value of the number.
​
digits
number
default:"2"
Defines how many digits should be displayed after the decimal point.
​
fillDigits
boolean
default:"false"
Defines if digits should be filled with zeros.
​
numberAlignEnd
boolean
default:"false"
Defines if the number should be aligned to the end of the input field.
​
showControls
boolean
default:"true"
Defines if the control arrows should be visible.
​
placeholder
string
Placeholder text for the input.
​
disabled
boolean
default:"false"
Determines if the field is disabled.
​
required
boolean
default:"false"
Determines if the field is required.
​
helpText
string
Help text with additional information.
​
error
object
Error object for validation messages.
​
size
'small' | 'default'
default:"'default'"
The size of the field.
​
copyable
boolean
default:"false"
Toggles the copy function.
​
isInherited
boolean
default:"false"
Toggles the inheritance visualization.
​
isInheritanceField
boolean
default:"false"
Determines if the field is inheritable.

​
Events

​
update:modelValue
(value: number | null) => void
Emitted when the value changes.
​
input-change
(value: number | null) => void
Emitted during input (before blur).
​
change
(event: Event) => void
Emitted when input loses focus.
​
inheritance-restore
(event: unknown) => void
Emitted when inheritance is restored.
​
inheritance-remove
(event: unknown) => void
Emitted when inheritance is removed.

​
Slots

​
prefix
slot
Content before the input.
​
suffix
slot
Content after the input.
​
hint
slot
Additional hint content.

​
Usage

​
Basic Number Field

<script setup>
import { ref } from 'vue';
const quantity = ref(0);
</script>

<template>
  <mt-number-field 
    v-model="quantity"
    label="Quantity"
  />
</template>

​
Integer Only

<template>
  <mt-number-field 
    v-model="count"
    label="Item count"
    number-type="int"
    :min="0"
  />
</template>

​
With Min and Max

<template>
  <mt-number-field 
    v-model="percentage"
    label="Percentage"
    :min="0"
    :max="100"
    :step="5"
  />
</template>

​
Currency Input

<template>
  <mt-number-field 
    v-model="price"
    label="Price"
    :digits="2"
    fill-digits
  >
    <template #prefix>
      <span>$</span>
    </template>
  </mt-number-field>
</template>

​
Right Aligned

<template>
  <mt-number-field 
    v-model="amount"
    label="Amount"
    number-align-end
  />
</template>

​
Without Controls

<template>
  <mt-number-field 
    v-model="value"
    label="Value"
    :show-controls="false"
  />
</template>

​
Accessibility

  • Uses text input with numeric validation
  • Arrow up/down keys increment/decrement value
  • Increment/decrement buttons have descriptive aria-labels
  • Min/max constraints enforced automatically
  • Focus visible outline for keyboard navigation
  • Disabled state prevents interaction

Build docs developers (and LLMs) love

Get started for freeTalk to us