# 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.
## Overview
# Playground
Verwende ``, um Telefonnummern einzugeben. Die Component
basiert auf [libphonenumber-js](https://www.npmjs.com/package/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.
```tsx
import {
FieldError,
Label,
} from "@mittwald/flow-react-components";
import { PhoneNumberField } from "@mittwald/flow-react-components/phone-tools";
export default () => (
)
```
---
# Ländervorwahl
Nummern ohne Ländervorwahl werden über `defaultCountry` interpretiert (Standard:
`DE`). Nummern mit `+`-Präfix werden unabhängig davon automatisch erkannt.
```tsx
import {
FieldDescription,
FieldError,
Label,
} from "@mittwald/flow-react-components";
import { PhoneNumberField } from "@mittwald/flow-react-components/phone-tools";
export default () => (
Nummern ohne Vorwahl werden als österreichisch (+43)
interpretiert
)
```
---
# Validierung
Ungültige Telefonnummern invalidieren das Feld automatisch. Mittels
`` wird die Fehlermeldung angezeigt; eigene Validierungen können
zusätzlich über `validate` ergänzt werden und erhalten die normalisierte Nummer.
```tsx
import {
FieldError,
Label,
} from "@mittwald/flow-react-components";
import { PhoneNumberField } from "@mittwald/flow-react-components/phone-tools";
export default () => (
)
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultCountry` | `CountryCode` | `"DE"` | The country used to interpret phone numbers entered without a country calling code. Numbers entered with a "+" prefix are detected automatically. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `children` | `ReactNode` | - | - |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-TextField'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `