Bileşenler
Input
Tek satırlık metin alanı; search ve password tipleri, ikonlar, ön ve son ek metinleri ve label ile hint’e bağlamak için FormField.
Playground
Kimliğinizdeki gibi
Figma varyantı
🎛 Type=Text
👕 Size=Medium
🕹 State=Default
Icon (L)=False
Icon (R)=False
Error=False
Disable=False
Device=Desktop
Form Input: Align=Vertical, Show Label=True, Show Hint=TrueTipler
Text varsayılandır. Search, arama ikonlu dolgulu görünümdür. Password değeri gizler ve göster/gizle düğmesi ekler. Ön ve son ek metinleri Leading ve Trailing Text tiplerini karşılar.
.ladom.co
Boyutlar
| Size | Height | Padding (y / x) | Radius | Text | Icon |
|---|---|---|---|---|---|
| medium | 40px | --layout-tiny / --layout-default | --radius-form-element | ui/text/regular | 16px |
| small | 32px | --layout-tiny / --layout-small | --radius-form-element-small | ui/text small/regular | 16px |
Durumlar
Durumu kenarlık taşır: dururken nötr, üzerine gelince primary tint, odakta primary ve odak halkası, dolunca low emphasis, hatada hata rengi ve ikon.
Label ve hint ile
Form Input label’ı alanın üstüne ya da yanına, hint’i altına koyar. Form Spacing tüm grubun altına form boşluğu ekler.
Kimliğinizdeki gibi
Tokenlar
| State | Border | Fill | Ring |
|---|---|---|---|
| Default | --color-surface-level-4 | --color-surface-level-1 | — |
| Hover | --color-primary-tint | --color-surface-level-1 | — |
| Focus | --color-primary | --color-surface-level-1 | --shadow-focus-primary |
| Typed | --color-foreground-low-emphasis | --color-surface-level-1 | — |
| Error | --color-error | --color-surface-level-1 | focus: --shadow-focus-error |
| Disabled | --color-surface-level-4 | --color-surface-level-2 | — |
| Search | --color-surface-level-2 | --color-surface-level-2 | — |
Figma notları
- Large Figma’da sadece Mobile cihaz için var; masaüstü boyutları Medium ve Small.
- Leading Text ve Trailing Text tiplerinin ikisi de ek metni değerden sonra gösteriyor. Kodda prefix (önce) ve suffix (sonra) var.
- Figma’da Error + Focus varyantı var; kodda hata kenarlığı ve hata odak halkası birlikte gösteriliyor.
- Henüz yapılmadı: Floating Label, GSM, File, Drag&Drop, Color Picker, Color Input, Chip ve Code tipleri ile Textarea.
Figma’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Text / Search / Password | type='text' / 'search' / 'password' |
| 🎛 Type = Leading Text / Trailing Text | prefix="…" / suffix="…" |
| 👕 Size = Medium / Small | size='medium' / 'small' |
| 🕹 State = Hover / Focus / Typed | :hover / :focus-within / filled value |
| Icon (L) / Icon (R) | iconLeft={…} / iconRight={…} |
| Error = True | error (or FormField error) |
| Disable = True | disabled |
| Form Input: Align / Form Spacing | <FormField align='…' spacing> |