# Install

```shell
npm i @vaadin/number-field
```

# Import

```javascript
import 'vaadin/number-field';
```

# Variants

## Default

```html
<vaadin-number-field label="Anzahl" helper-text="Geben Sie einen Zahlenwert ein" step-buttons-visible></vaadin-number-field>
```

```javascript
document.querySelector('vaadin-number-field').value = 10;
```

## Required

```html
<vaadin-number-field label="Pflichtfeld" required step-buttons-visible></vaadin-number-field>
```

```javascript
document.querySelector('vaadin-number-field').value = 10;
```

## Disabled

```html
<vaadin-number-field label="Inaktiv" disabled step-buttons-visible></vaadin-number-field>
```

```javascript
document.querySelector('vaadin-number-field').value = 10;
```

## Read Only

```html
<vaadin-number-field label="Nur lesen" readonly></vaadin-number-field>
```

```javascript
document.querySelector('vaadin-number-field').value = 10;
```

## Invalid

```html
<vaadin-number-field label="Ungültig" invalid step-buttons-visible></vaadin-number-field>
```

```javascript
document.querySelector('vaadin-number-field').value = 10;
document.querySelector('vaadin-number-field').errorMessage = 'Bitte einen gültigen Zahlenwert eingeben.';
```