# Install

```shell
npm i @mate-react/text-field
```

# Import

```tsx
import { MateTextField } from '@mate-react/text-field';
```

# Variants

## Default

```tsx
<MateTextField label="Label" helperText="Helper text" clearButtonVisible />
```

## Required

```tsx
<MateTextField label="Required" required />
```

## Disabled

```tsx
<MateTextField label="Disabled" disabled />
```

## Read Only

```tsx
<MateTextField label="Read only" readonly />
```

## Invalid

```tsx
<MateTextField label="Invalid" invalid errorMessage="Error message" />
```

## With Prefix

```tsx
<MateTextField label="Price">
  <span slot="prefix">€</span>
</MateTextField>
```

## With Suffix

```tsx
<MateTextField label="Weight">
  <span slot="suffix">kg</span>
</MateTextField>