Bileşenler

OtpInput

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

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Boş	Kenarlıklı kare	`color-border-input`
Etkin kutu	Odak kenarlığı ve halka; boş kutuda çizilmiş 1 × 16 px imleç	`color-border-focus`, `color-focus-ring`, `color-text-default`
Dolu	Güçlü kenarlık, gömük zemin	`color-border-strong`, `color-surface-sunken`
Geçersiz	Bütün kutular tehlike kenarlığı	`color-border-danger`
Devre dışı	Soluk kutular	`color-surface-disabled`, `color-border-disabled`

Ölçüler

Özellik	Değer	Token
Kutu	32 / 36 / 40 px kare	`input-height-sm`, `input-height-md`, `input-height-lg`
Kutular	Tek şeritte birleşik: ortak 1 px kenarlık, yalnız dış köşeler yuvarlak	`border-width-default`, `input-radius`
Grup ile ayırıcı arası	6 px	`space-sm`
Ayırıcı	8 × 1 px	`space-md`
Karakter	`heading-sm`, eşit genişlikte rakam	—

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-input-radius`		`10px10px10px`	`10px10px10px`
`--bigbang-color-border-input`		`#8c8c8c#8c8c8c#8c8c8c`	`#737373#737373#737373`
`--bigbang-color-border-strong`		`#8c8c8c#8c8c8c#8c8c8c`	`#8c8c8c#8c8c8c#8c8c8c`
`--bigbang-color-surface-sunken`		`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-border-width-default`		`1px1px1px`	`1px1px1px`
`--bigbang-space-sm`		`6px6px6px`	`6px6px6px`
`--bigbang-period-caret-blink`		`1s1s1s`	`1s1s1s`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Etkin kutu değişir	Kenarlık rengi (`motion.field`); halka hemen	`motion-focus-duration`	`motion-focus-easing`	Değişmez.
Kutu dolar	Kenarlık ve zemin rengi	`motion-focus-duration`	`motion-focus-easing`	Değişmez.
Hata metni	Belirir, 4 px iner (`motion.fieldMessage`)	`motion-collapsible-duration`	`motion-collapsible-easing`	Yalnızca solar.
Boş etkin kutudaki imleç	Beş kez yanıp söner (`opacity`), sonra sabit kalır	`period-caret-blink` (1000 ms)	`easing-linear`	Sabit kalır.

Hata hiçbir zaman sallanmaz. Değerler için Hareket sayfasına bakın.