# PhoneInput
> Un teléfono en E.164: el país con su bandera y código adentro del campo, y el número en dígitos. Sin libphonenumber.
```tsx
import { PhoneInput } from "sebs7n-ui/phone-input"
```
## Ejemplos
### Básico
El país con su bandera y código adentro del campo, y el número en dígitos. El valor es E.164.
```tsx
import { Field, FieldDescription, FieldLabel } from "sebs7n-ui"
import { PhoneInput } from "sebs7n-ui/phone-input"
import { useState } from "react"
function Basic() {
const [phone, setPhone] = useState("+5491155552002")
return (
Teléfono de contacto
Se guarda como {phone || "—"}.
)
}
```
### Con validación
`isValidPhone` (de `sebs7n-ui/lib/phone`, también en el servidor) mira el largo del número de cada país.
```tsx
import { Field, FieldError, FieldLabel } from "sebs7n-ui"
import { PhoneInput } from "sebs7n-ui/phone-input"
import { isValidPhone } from "sebs7n-ui/lib/phone"
import { useState } from "react"
function WithValidation() {
const [phone, setPhone] = useState("+598991234")
const invalid = phone !== "" && !isValidPhone(phone)
return (
Teléfono para avisos de cobroAl número le faltan dígitos.
)
}
```
### Para mostrar
`formatPhone` de `sebs7n-ui/lib/phone`: internacional legible, o nacional si el teléfono es argentino y quien lo lee también (`country: "AR"`).
```tsx
import { formatPhone } from "sebs7n-ui/lib/phone"
function Display() {
return (
Cliente
Internacional
Desde Argentina
{contacts.map((contact) => (
{contact.client}
{formatPhone(contact.phone)}
{formatPhone(contact.phone, { country: "AR" })}
))}
)
}
```
### Datos viejos
Un valor guardado sin «+» se toma como número nacional del país (`011 5555-2002` → +54 11 5555 2002) y el formulario ya lleva el E.164. Si no es un número posible, queda el texto y el campo inválido.
```tsx
import { Field, FieldDescription, FieldLabel } from "sebs7n-ui"
import { PhoneInput } from "sebs7n-ui/phone-input"
function Legacy() {
return (
Teléfono de Acme S.A.Teléfono de Globex SRLNo es un número: corregilo a mano.
)
}
```
## Props
### PhoneInput
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `aria-describedby` | `string` | — | El `id` de la ayuda o del error del campo. |
| `aria-invalid` | `boolean` | — | Marca el campo inválido (borde rojo). |
| `aria-label` | `string` | — | Nombre accesible del elemento. |
| `aria-labelledby` | `string` | — | El `id` del elemento que nombra el número, si no es un `