Bileşenler

PhoneInput

Ülke kodu seçicili telefon alanı; Türkiye varsayılan, E.164 olarak gönderilir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Ülke kodu seçici ve numara tek kutudadır; Türkiye (+90) varsayılandır.

Telefon

Size bu numaradan ulaşacağız.

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

export default function Default() {
  return <PhoneInput label="Telefon" description="Size bu numaradan ulaşacağız." className="max-w-sm" />;
}

Durumlar

Dolu, eksik numara hatası, salt okunur ve devre dışı.

Telefon

Telefon numarasını eksiksiz girin.

Telefon

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

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '5321234567' }} />
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '532123' }} error="Telefon numarasını eksiksiz girin." />
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '5321234567' }} readOnly />
      <PhoneInput label="Telefon" disabled />
    </div>
  );
}

Yapıştırmada düzeltme

+49 151… ya da 0532… yapıştırın: ülke ve gruplama değişir. Altta E.164 biçimi görünür.

Telefon

—

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

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

Açık ve koyu mod

Kutu ve açılır liste anlamsal token kullanır.

Telefon

Telefon numarasını eksiksiz girin.

Telefon

Telefon numarasını eksiksiz girin.

Telefon

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

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '5321234567' }} />
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '532123' }} error="Telefon numarasını eksiksiz girin." />
      <PhoneInput label="Telefon" defaultValue={{ country: 'TR', national: '5321234567' }} readOnly />
      <PhoneInput label="Telefon" disabled />
    </div>
  );
}