Version:

Install ​

shell
npm i @mate-vue/number-field

Import ​

vue
<script setup>
import { MateNumberField } from '@mate-vue/number-field';
</script>

Variants ​

Default ​

vue
<template>
  <MateNumberField label="Anzahl" v-model:value="count" helperText="Geben Sie einen Zahlenwert ein" step-buttons-visible></MateNumberField>
</template>

Required ​

vue
<template>
  <MateNumberField label="Pflichtfeld" v-model:value="count" required step-buttons-visible></MateNumberField>
</template>

Disabled ​

vue
<template>
  <MateNumberField label="Inaktiv" v-model:value="count" disabled step-buttons-visible></MateNumberField>
</template>

Read Only ​

vue
<template>
  <MateNumberField label="Nur lesen" v-model:value="count" readonly></MateNumberField>
</template>

Invalid ​

vue
<template>
  <MateNumberField label="Ungültig" v-model:value="count" invalid errorMessage="Bitte einen gültigen Zahlenwert eingeben." step-buttons-visible></MateNumberField>
</template>