Components

PhoneInput

A phone field with a country code picker; Turkey by default, sent in E.164.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The country code picker and the number share one box; Turkey (+90) is the default.

Phone

We will reach you on this number.

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>
  );
}

States

Filled, incomplete number error, read-only and disabled.

Phone

Enter the full phone number.

Phone

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '5321234567' }} />
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '532123' }} error="Enter the full phone number." />
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '5321234567' }} readOnly />
        <PhoneInput label="Phone" disabled />
      </div>
    </Provider>
  );
}

Correction on paste

Paste +49 151… or 0532…: the country and grouping change. The E.164 form shows below.

Phone

—

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

export default function Normalised() {
  const [e164, setE164] = useState<string | null>(null);
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-sm">
        <PhoneInput label="Phone" countries={['TR', 'AZ', 'DE', 'GB']} onValueChange={(_, number) => setE164(number)} />
        <output className="type-body-sm text-fg-subtle tabular-nums">{e164 ?? '—'}</output>
      </div>
    </Provider>
  );
}

Light and dark mode

The box and the list use semantic tokens.

Phone

Enter the full phone number.

Phone

Enter the full phone number.

Phone

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

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-sm flex-col gap-lg">
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '5321234567' }} />
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '532123' }} error="Enter the full phone number." />
        <PhoneInput label="Phone" defaultValue={{ country: 'TR', national: '5321234567' }} readOnly />
        <PhoneInput label="Phone" disabled />
      </div>
    </Provider>
  );
}