Ein Text Field ist ein Eingabebereich für benutzergenerierten Text. Häufig werden Text
Fields in Formularen zur Erfassung von Daten verwendet.
Durch Antippen des Text Fields kann die Texteingabe aktiviert werden. Im Fall von Touch-Anwendungen
wird hierzu automatisch eine Tastatur eingeblendet. Optional wird während der Texteingabe der Inhalt
validiert und durch einen entsprechenden Validierungszustand angezeigt.
Text Fields
benötigen immer ein Label, dieses muss nicht integriert sein, sondern kann auch durch den Kontext definiert
werden.
Werden mehrzeilige Texteingaben benötigt, wird die skalierbare Variante „Text Area“ verwendet.
Text Field mit Validierung
Text Fields und Text Areas können einen Validierungszustand (Neutral, Success, Warning, Error) anzeigen. Das jeweilige Text Field bzw. die jeweilige Area benötigt dazu zusätzlich eine textliche Erläuterung, dazu wird das Element mit einem Notification Text kombiniert.Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
value | string | undefined | Value of the input field |
name | string | undefined | Name of the input field |
required | boolean | undefined | required fields will be suffixed with an asterisk '*' |
hasReset | boolean | false | if type is search enables a reset button |
hasSearch | boolean | true | Show Search Icon |
disabled | boolean | false | is the field disabled |
readonly | boolean | false | is the field readonly |
id | string | undefined | unique id of the field |
placeholder | string | undefined | Placeholder of the field |
label | string | undefined | Label of the field |
type | 'text' | 'search' | 'password' |'integrated' | undefined | the type of text input field |
integratedButtonIcon | undefined | undefined | |
integratedButtonDisabled | undefined | false | |
integratedButtonTitle | undefined | "" | |
debounceTime | number | 300 | time to debounce on value change |
isLoading | boolean | false | Shows Skeleton if true |
title | string | undefined | Appears on hover |
style | string | undefined | Additional css styles |
tabindex | undefined | 0 |
Events
| Name | Description |
|---|---|
focus | |
focusTab | fires if element is focused and tab is pressed |
keydown | |
blur |
Beispiele
Text Field
Password Text Field
Search Field
Das Search Field dient zur Eingabe von Suchanfragen.
Das Search Field mit Close/Reset Button dient dazu die Suchanfrage abbrechen oder schließen zu können.