PhoneInput

When to use

PhoneInput is for any form that asks for a phone number. Turkey is the default; the number is sent in E.164 (+905321234567).

When not to use

• For a verification code: use OtpInput.
• To only show a phone number: use plain text or MaskedValue.

Anatomy

Phone

TR +90

We will reach you on this number.

LightDark

Copy code

import { PhoneInput, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <PhoneInput label="Phone" description="We will reach you on this number." className="max-w-sm" />
    </Provider>
  );
}

1. Label: Names the group and the number field.
2. Country code picker: “TR +90”; the list shows country names in the Provider language.
3. Number: Grouped while typing: 532 123 45 67.
4. Description and error: Under the group.

Behaviour

• A leading 0 (trunk prefix) is dropped; in Turkey the number has 10 digits.
• A number starting with + or 00 changes the country: +49 151… picks Germany.
• Characters other than digits are dropped; the number is cut at the country’s length.
• When the country changes, the number is kept and shortened to the new length.
• The form receives the E.164 value under name.

Guidelines

• Offer only the countries you serve with countries.
• Check an incomplete number with isPhoneComplete on submit and show the error under the field.
• Do not explain the format in a placeholder; the field groups it while typing.

Content

• Label: “Phone” or “Mobile phone”.
• The error says what to do: “Enter the full phone number.”

Turkish	English
Ülke kodu	Country code

Related components

• TextInput: Plain text.
• Select: Where the picker’s look comes from.