PasswordInput

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Göz düğmesi değeri gösterir ve gizler; basılı durumu aria-pressed ile bildirilir.

Şifre

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return <PasswordInput label="Şifre" autoComplete="current-password" className="max-w-sm" />;
}

Durumlar

Açıklamalı, geçersiz ve devre dışı.

Şifre

Yardım metni burada yer alır.

Şifre

Şifre koşulları karşılamıyor.

Şifre

AçıkKoyu

Kodu kopyala

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

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <PasswordInput label="Şifre" autoComplete="current-password" description="Yardım metni burada yer alır." />
      <PasswordInput label="Şifre" autoComplete="current-password" defaultValue="kısa" error="Şifre koşulları karşılamıyor." />
      <PasswordInput label="Şifre" autoComplete="current-password" defaultValue="örnek-değer-1" disabled />
    </div>
  );
}

Yeni şifre

rules koşul listesini alanın altında gösterir ve alana bağlar; karşılanan koşul yeşile döner. showStrength üç adımlı güç çubuğunu ekler.

Yeni şifre* zorunlu

• En az 12 karakter, karşılanmadı
• Bir büyük harf, karşılandı
• Bir rakam, karşılandı

Şifre gücü: orta

AçıkKoyu

Kodu kopyala

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

const rules = [
  { id: 'length', label: 'En az 12 karakter', test: (value: string) => value.length >= 12 },
  { id: 'upper', label: 'Bir büyük harf', test: (value: string) => /[A-ZÇĞİÖŞÜ]/.test(value) },
  { id: 'digit', label: 'Bir rakam', test: (value: string) => /\d/.test(value) },
];

export default function NewPassword() {
  return <PasswordInput className="max-w-sm" label="Yeni şifre" autoComplete="new-password" rules={rules} showStrength defaultValue="Örnek1" required />;
}

Açık ve koyu mod

Koşul ve güç renkleri anlamsal durum token’larıdır.

Açık

Yeni şifre* zorunlu

• En az 12 karakter, karşılanmadı
• Bir büyük harf, karşılandı
• Bir rakam, karşılandı

Şifre gücü: orta

Koyu

Yeni şifre* zorunlu

• En az 12 karakter, karşılanmadı
• Bir büyük harf, karşılandı
• Bir rakam, karşılandı

Şifre gücü: orta

Kodu kopyala

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

const rules = [
  { id: 'length', label: 'En az 12 karakter', test: (value: string) => value.length >= 12 },
  { id: 'upper', label: 'Bir büyük harf', test: (value: string) => /[A-ZÇĞİÖŞÜ]/.test(value) },
  { id: 'digit', label: 'Bir rakam', test: (value: string) => /\d/.test(value) },
];

export default function NewPassword() {
  return <PasswordInput className="max-w-sm" label="Yeni şifre" autoComplete="new-password" rules={rules} showStrength defaultValue="Örnek1" required />;
}