# Install

```shell
npm i @mate-vue/text-field@${version.mate.vue}
```

# Import

```vue
<script setup>
import { MateTextField } from '@mate-vue/text-field';
</script>
```

# Variants

## Default

```vue
<template>
  <MateTextField label="Name" v-model:value="name" helperText="Vor- und Nachname eingeben" clearButtonVisible></MateTextField>
</template>
```

## Required

```vue
<template>
  <MateTextField label="Pflichtfeld" required></MateTextField>
</template>
```

## Disabled

```vue
<template>
  <MateTextField label="Inaktiv" v-model:value="name" disabled></MateTextField>
</template>
```

## Read Only

```vue
<template>
  <MateTextField label="Nur lesen" v-model:value="name" readonly></MateTextField>
</template>
```

## Invalid

```vue
<template>
  <MateTextField label="Ungültig" invalid errorMessage="Bitte einen gültigen Wert eingeben."></MateTextField>
</template>
```