Playground

Verwende <TextField />, um ein TextField anzuzeigen. Integriere immer ein <Label />, um Informationen zu vermitteln, die für das Verständnis der Eingabeanforderungen unerlässlich sind. Optional können zusätzliche Informationen (z.B. Formatierungshinweise) über die <FieldDescription /> ergänzt werden.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";
import FieldDescription from "@mittwald/flow-react-components/FieldDescription";

<TextField>
  <Label>URL</Label>
  <FieldDescription>Beginnt mit https://</FieldDescription>
</TextField>

Disabled

Wenn das TextField disabled ist, kann nicht mit ihm interagiert werden. Sobald die Ursache für die Deaktivierung behoben ist, kann das TextField wieder normal verwendet werden.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";

<TextField isDisabled>
  <Label>URL</Label>
</TextField>

Validierung

Um das textField zu validieren, stehen folgende Properties zur Verfügung:

• isRequired für Pflichtfelder.
• validate für eigene Validierungen.
• HTML Input Properties wie type=”email”, minLength.

Wenn die Benutzereingabe nicht den Anforderungen entspricht, wird das TextField invalidiert. Mittels <FieldError /> kann eine Fehlermeldung angezeigt werden.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";
import FieldError from "@mittwald/flow-react-components/FieldError";

<TextField isInvalid defaultValue="hello">
  <Label>URL</Label>
  <FieldError>Das ist keine URL</FieldError>
</TextField>

Value

Standardmäßig ist der Value eines TextFields leer. Es ist möglich dem TextField eine uncontrolled defaultValue mitzugeben. Es kann auch ein controlled value für das TextField gesetzt werden, um dieses über onChange zu updaten.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";

<TextField defaultValue="https://mittwald.de">
  <Label>URL</Label>
</TextField>

Input Properties

Das TextField unterstützt die Standard-Properties eines HTML <input /> Feldes. (s. MDN)

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";

<TextField name="email" type="email">
  <Label>E-Mail</Label>
</TextField>

Character Count

Über das showCharacterCount Property wird eine FieldDescription hinzugefügt, die aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl anzeigt.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";

<TextField showCharacterCount maxLength={10}>
  <Label>Benutzername</Label>
</TextField>

Grundlagen

Best Practices

• Frage nur nach Informationen, die wirklich notwendig sind.
• Stelle sicher, dass das Label prägnant, vollständig sichtbar und leicht verständlich ist.
• Verwende die FieldDescription für sinnvolle Beispiele oder Formatierungshinweise.
• Stelle sicher, dass Fehlermeldungen hilfreich sind, eine Lösung bieten und leicht umzusetzen sind.
• Verwende keine Placeholder für wesentliche Informationen.

Anwendung

Position

Das TextField wird meistens innerhalb eines ColumnLayouts platziert und füllt dort immer die zur Verfügung stehende Breite. Dadurch folgt es auch einer Aufteilung in Spalten, sofern das ColumnLayout eine vorsieht. Am besten eignet sich ein 1:1 Raster für TextFields, sodass sie maximal die Hälfte des Content-Bereichs einnehmen können. Das ColumnLayout kann zudem erweitert werden, um spezifischeren Layoutanforderungen gerecht zu werden.

isRequired

Um ein TextField als erforderlich zu markieren, benutze das dazugehörige Property isRequired. Felder, die nicht required sind, werden als optional gekennzeichnet.

import Label from "@mittwald/flow-react-components/Label";
import TextField from "@mittwald/flow-react-components/TextField";
import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";

<ColumnLayout m={[1, 1]}>
  <TextField isRequired>
    <Label>URL</Label>
  </TextField>
  <TextField>
    <Label>URL</Label>
  </TextField>
</ColumnLayout>

Inhalt

Label

Jedes TextField muss ein zugehöriges Label besitzen. Das Label ist entscheidend, um die Eingabeanforderungen zu verstehen und sollte daher so gewählt werden, dass es alle Informationen liefert, um das TextField korrekt ausfüllen zu können. Außerdem sollte das Label knapp (max. 2 Wörter), präzise und weder versteckt noch auspunktiert sein.

FieldDescription

Die FieldDescription kann als optionaler Hilfstext unterhalb des TextFields angezeigt werden, um dem Nutzer ergänzenden Informationen oder Anweisungen zu bieten. Sie sollte sparsam verwendet werden und kann Eingabe- und Formatierungsbeispiele liefern.

Placeholder

Placeholder sind nicht accessible und dürfen daher keine Informationen enthalten, die für das korrekte Ausfüllen des TextFields erforderlich sind. Das größte Problem ist, dass Placeholder verschwinden, sobald Text eingegeben wird. Darüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkann und sind kognitiv schwieriger zu verarbeiten als die FieldDescritption. Statt einen Placeholder zu verwenden, ergänze das TextField mit ...

• einem Label für Informationen, die essenziell für das Verständnis der Eingabeanforderungen sind.
• einer FieldDescription, um dem Nutzer Beispiele oder Formatierungshinweise zu geben.

Accessibility

Das TextField kann sowohl über die Tastatur erreicht und aktiviert werden als auch mit Assistenztechnologien angesteuert werden. Damit auch der Inhalt barrierefrei ist, solltest du:

• immer ein Label verwenden, welches essenzielle Eingabeanforderungen über das Label kommuniziert.
• die FieldDescription nutzen, um Unterstützung, Beispiele oder Formatierungshilfen zu geben.
• Placeholder nicht für Inhalte verwenden, die zum Ausfüllen des TextFields hilfreich sind.