# 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>
```