PasswordInput

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

PasswordInput.tsx

Storybook

PasswordInput · Playground

PasswordInput, @bigbang/ui paketindedir.

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

<PasswordInput label="Yeni şifre" autoComplete="new-password" rules={rules} showStrength />;

Özellikler

labelZorunlu

Açıklama

Alanın görünen etiketi; <label> ile alana bağlanır.

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verilirse alan geçersiz olur ve mesaj alanla birlikte okunur.

Tür

string

invalid

Açıklama

Alanı mesajsız geçersiz işaretler, ör. mesaj bir hata özetindeyse.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: alan required alır ve etiket işaretlenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: 'required' zorunluları, 'optional' diğerlerini.

Tür

'required' | 'optional'

Varsayılan

'required'

autoCompleteZorunlu

Açıklama

Parola yöneticisine ne yapacağını söyler: 'current-password' girişte kayıtlı şifreyi doldurur, 'new-password' yeni şifre önerir. Yöneticiler hep çalışsın diye zorunludur.

Tür

'current-password' | 'new-password'

rules

Açıklama

Alanın altında liste olarak gösterilen ve alana bağlanan koşullar; karşılanan koşul yeşile döner. 'new-password' ile kullanın.

Tür

readonly PasswordRule[]

showStrength

Açıklama

Üç adımlı güç çubuğunu metin düzeyiyle gösterir. Karşılanan rules sayısını, koşul yoksa uzunluk, büyük-küçük harf, rakam ve sembolü sayar.

Tür

boolean

Varsayılan

false

size

Açıklama

Alan yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

value

Açıklama

Kontrollü değer. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz alanın ilk değeri.

Tür

string

onValueChange

Açıklama

Değer her değiştiğinde çağrılır.

Tür

((value: string, eventDetails: { reason: 'none'; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)

placeholder

Açıklama

Alan boşken görünen metin. Etiketi tekrarlamayın, koşulları buraya yazmayın.

Tür

string

readOnly

Açıklama

Değere odaklanılabilir ama değiştirilemez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Alanı, etiketi ve göz düğmesini devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderildiğinde kullanılan alan adı.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="password-input": kök öğe üzerinde.
• data-part: label, box, control, visibility-toggle, caps-lock, rules, rule, strength, error.
• data-met: karşılanan koşulda. data-level: güç parçasında (weak, fair, strong).