PhoneNumberField

Das PhoneNumberField ermöglicht die Eingabe von Telefonnummern in beliebigem Format. Eingaben werden automatisch normalisiert und validiert — Leerzeichen und Ländervorwahl muss der User nicht in einem bestimmten Format eingeben.GitHubMarkdown

Playground

Verwende <PhoneNumberField />, um Telefonnummern einzugeben. Die Component basiert auf libphonenumber-js und wird über den Export @mittwald/flow-react-components/phone-tools bereitgestellt.

Eingaben werden unabhängig von Leerzeichen und Formatierung verstanden. Über onChange liefert die Component gültige Nummern immer im E.164-Format (z. B. +495772293100); beim Verlassen des Felds wird die Anzeige international formatiert.

import {
  FieldError,
  Label,
} from "@mittwald/flow-react-components";
import { PhoneNumberField } from "@mittwald/flow-react-components/phone-tools";

export default () => (
  <PhoneNumberField>
    <Label>Telefonnummer</Label>
    <FieldError />
  </PhoneNumberField>
)

Ländervorwahl

Nummern ohne Ländervorwahl werden über defaultCountry interpretiert (Standard: DE). Nummern mit +-Präfix werden unabhängig davon automatisch erkannt.

Nummern ohne Vorwahl werden als österreichisch (+43) interpretiert

Validierung

Ungültige Telefonnummern invalidieren das Feld automatisch. Mittels <FieldError /> wird die Fehlermeldung angezeigt; eigene Validierungen können zusätzlich über validate ergänzt werden und erhalten die normalisierte Nummer.

Auf dieser Seite