Bileşenler

OtpInput

Karakter başına bir kutulu, tek sekme duraklı tek kullanımlık kod alanı.

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

Her karakter ayrı bir kutudadır ama kod tek bir sekme durağıdır. groupSize kutuları gruplara ayırır.

Doğrulama kodu

Size gönderilen 6 haneli kodu girin.

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

export default function Default() {
  return <OtpInput label="Doğrulama kodu" description="Size gönderilen 6 haneli kodu girin." groupSize={3} />;
}

Durumlar

Kısmen dolu, geçersiz, maskeli (PIN) ve devre dışı.

Doğrulama kodu

Kod hatalı. Yeniden deneyin.

Doğrulama kodu

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

export default function States() {
  return (
    <div className="flex flex-col gap-xl">
      <OtpInput label="Doğrulama kodu" defaultValue="123" groupSize={3} />
      <OtpInput label="Doğrulama kodu" defaultValue="123456" error="Kod hatalı. Yeniden deneyin." />
      <OtpInput label="Doğrulama kodu" defaultValue="1234" length={4} mask />
      <OtpInput label="Doğrulama kodu" disabled />
    </div>
  );
}

Doğrulama

onValueComplete son karakterde çalışır; yanlış kodda değeri temizleyip hata gösterin.

Doğrulama kodu

Doğru kod: 123456

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

export default function Verify() {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);
  return (
    <OtpInput
      label="Doğrulama kodu"
      description="Doğru kod: 123456"
      groupSize={3}
      value={value}
      onValueChange={(next) => {
        setValue(next);
        setError(false);
      }}
      onValueComplete={(code) => {
        if (code !== '123456') {
          setError(true);
          setValue('');
        }
      }}
      {...(error ? { error: 'Kod hatalı. Yeniden deneyin.' } : {})}
    />
  );
}

Açık ve koyu mod

Dolu kutu color-surface-sunken zemine ve güçlü kenarlığa geçer.

Doğrulama kodu

Kod hatalı. Yeniden deneyin.

Doğrulama kodu

Kod hatalı. Yeniden deneyin.

Doğrulama kodu

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

export default function States() {
  return (
    <div className="flex flex-col gap-xl">
      <OtpInput label="Doğrulama kodu" defaultValue="123" groupSize={3} />
      <OtpInput label="Doğrulama kodu" defaultValue="123456" error="Kod hatalı. Yeniden deneyin." />
      <OtpInput label="Doğrulama kodu" defaultValue="1234" length={4} mask />
      <OtpInput label="Doğrulama kodu" disabled />
    </div>
  );
}