# @berlitz/phone-input

> PhoneInput component for the Max Design System

Latest version **2.2.3** (published 2025-04-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @berlitz/phone-input
pnpm add @berlitz/phone-input
yarn add @berlitz/phone-input
bun add @berlitz/phone-input
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.3 |
| Published | 2025-04-21 |
| First published | 2019-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berlitz |

## Links

- npm: https://www.npmjs.com/package/@berlitz/phone-input
- Homepage: https://github.com/berlitz-global/max/blob/master/components/phone-input/CHANGELOG.md
- npm.io page: https://npm.io/package/@berlitz/phone-input

## Dependencies (2)

- [styled-components-rtl](https://npm.io/package/styled-components-rtl.md) 5.2.0
- [react-phone-number-input](https://npm.io/package/react-phone-number-input.md) 2.4.1

## Recent versions

- 2.2.3 (latest) — 2025-04-21
- 2.1.6-test.25 (canary) — 2022-01-24
- 2.2.2 — 2025-04-16
- 2.2.1 — 2025-04-16
- 2.2.0 — 2025-04-16
- 2.1.5 — 2021-09-20
- 2.1.4 — 2021-08-05
- 2.1.3 — 2021-04-09
- 2.1.2 — 2021-02-12
- 1.0.1-alpha.63 — 2021-02-12
- 2.1.1 — 2021-01-21
- 2.1.0 — 2021-01-20
- 2.0.1 — 2021-01-06
- 2.0.0 — 2021-01-05
- 1.0.0 — 2020-10-16
- … 6 more at https://npm.io/package/@berlitz/phone-input/versions

## README

# PhoneInput [![npm version](https://img.shields.io/npm/v/@berlitz/phone-input.svg)](https://www.npmjs.com/package/@berlitz/phone-input)

Berlitz phone input, is a text input field which comes with a dropdown that contains every available country codes.

### When to use this component

Input of any type of phone number

## Installation

```shell
yarn add @berlitz/phone-input
```

## Props

All props from @berlitz/input component, as well as props from react-phone-number-input

| Prop                             | Type   | Required | Default | Notes                                            |
| -------------------------------- | ------ | -------- | ------- | ------------------------------------------------ |
| ariaDescribedby                  | String |          |         |                                                  |
| autocomplete                     | String |          |         |                                                  |
| button                           | Bool   |          |         | add an arrow button to the right of the input    |
| defaultValue                     | String |          |         |                                                  |
| disabled                         | Bool   |          |         |                                                  |
| id                               | String |          |         |                                                  |
| invalid                          | Bool   |          |         |                                                  |
| name                             | String | X        |         |                                                  |
| onBlur                           | Func   |          |         |                                                  |
| onChange                         | Func   |          |         |                                                  |
| onClick                          | Func   |          |         | onClick handler to attach to the optional button |
| placeholder                      | String |          |         | eg. "Enter phone number"                         |
| required                         | Bool   |          |         |                                                  |
| type                             | String | X        |         |                                                  |
| value                            | String |          |         |                                                  |
| country                          | String |          |         | eg. "AU"                                         |
| displayInitialValueAsLocalNumber | Bool   |          | true    |                                                  |
| labels                           | Object |          |         | Custom translation (including country names).    |
| metadata                         | Object |          |         | Custom libphonenumber-js "metadata".             |
| internationalIcon                | Node   |          |         | Custom "International" icon                      |
| numberInputComponent             | Node   |          |         | Custom phone number <input/> component           |
| countrySelectComponent           | Node   |          |         | Custom country <select/> component               |

Refer to [react-phone-number-input](http://catamphetamine.github.io/react-phone-number-input/) for more info

## Usage

```jsx
import React from 'react'
import PhoneInput from '@berlitz/phone-input'
const MyApp = () => (
  <PhoneInput
    placeholder="Enter phone number"
    country="AU"
    displayInitialValueAsLocalNumber
  />
)
```

---
_Source: https://npm.io/package/@berlitz/phone-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._