Version:

Install ​

shell
npm i @vaadin/text-field

Import ​

javascript
import 'vaadin/text-field';

Variants ​

Default ​

html
<vaadin-text-field label="Anzahl" helper-text="Geben Sie einen Text ein"></vaadin-text-field>
javascript
document.querySelector('vaadin-text-field').value = 10;

Required ​

html
<vaadin-text-field label="Pflichtfeld" required></vaadin-text-field>
javascript
document.querySelector('vaadin-text-field').value = 10;

Disabled ​

html
<vaadin-text-field label="Inaktiv" disabled></vaadin-text-field>
javascript
document.querySelector('vaadin-text-field').value = 10;

Read Only ​

html
<vaadin-text-field label="Nur lesen" readonly></vaadin-text-field>
javascript
document.querySelector('vaadin-text-field').value = 10;

Invalid ​

html
<vaadin-text-field label="Ungültig" invalid></vaadin-text-field>
javascript
document.querySelector('vaadin-text-field').value = 10;
document.querySelector('vaadin-text-field').errorMessage = 'Bitte einen gültigen Wert eingeben.';

Truncated label ​

html
<vaadin-text-field label="Dieses Label ist so lang, dass man es abschneiden muss, aber nicht vergessen einen Tooltip zu setzen">
    <vaadin-tooltip text="Das Label ist so lang, dass man es im Tooltip erklären muss"></vaadin-tooltip>
</vaadin-text-field>

Multiline label ​

html
<vaadin-text-field label="Dieses Label ist so lang, dass es in mehrere Zeilen umbricht. Das könnte aber das Layout brechen" 
                   theme="multiline-label">
</vaadin-text-field>