mittwald Flow Logo

Components

TextField

Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.GitHub
Beginnt mit https://

Playground

Verwende <TextField />, um ein TextField anzuzeigen. Nutze ein <Label />, um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen erleichtern. Weiterführende Informationen (z. B. Formatierungshinweise) können über die <FieldDescription /> ergänzt werden.

Beginnt mit https://
import {
  FieldDescription,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<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,
  TextField,
} from "@mittwald/flow-react-components";

<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.

Das ist keine URL
import {
  FieldError,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<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,
  TextField,
} from "@mittwald/flow-react-components";

<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,
  TextField,
} from "@mittwald/flow-react-components";

<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.

0/10 characters
import {
  Label,
  TextField,
} from "@mittwald/flow-react-components";

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

Kombiniere mit ...

Align

Benutze die Align Komponente, um einem Button neben deinem TextField zu platzieren.

import {
  Align,
  Button,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<Align>
  <TextField>
    <Label>Weiterleitungsziel</Label>
  </TextField>
  <Button>Hinzufügen</Button>
</Align>

ContextualHelp

Benutze die ContextualHelp Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  Text,
  TextField,
} from "@mittwald/flow-react-components";

<TextField>
  <Label>
    URL
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
</TextField>

React Hook Form

import {
  Button,
  Label,
  Section,
  TextField,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-components/actions/action/examples/lib";

export default () => {
  const form = useForm<{ url: string }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="url"
          rules={{
            required: "Bitte gib eine URL ein",
          }}
        >
          <TextField>
            <Label>URL</Label>
          </TextField>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Overview