Bileşenler
Selectbox
Bir listeden bir ya da birden çok değer seçtirir. Kutu, seçenekleri Cell olan bir Dropdown açar.
Playground
Figma varyantı
🎛 Type=Basic
👕 Size=Medium
🕹 State=Default
Disable=False
Error=False
Fluid=TrueAnatomi
Kutu placeholder’ı ya da seçili değeri ve bir oku gösterir. Açılınca 4px altında her seçenek için bir Cell içeren Dropdown çıkar; Multiselect hücrelerinde checkbox vardır.
Tipler
Basic tek değer seçer. Inner Label, label’ı kutunun içine çizer. Multiselect birden çok seçer ve sayı badge’i gösterir; Chip her seçimi bir chip olarak gösterir.
Boyutlar
Large, Medium, Small ve Tiny. Medium ve Large listede Medium hücre, Small ve Tiny Small hücre kullanır.
| Size | Height | Padding | Gap | Text | Arrow |
|---|---|---|---|---|---|
| large | 48px | --space-small --space-medium | --layout-small | ui/text lead/regular | 16px |
| medium | 40px | --space-tiny --space-medium | --layout-small | ui/text/regular | 16px |
| small | 32px | --space-tiny --space-small | --space-micro | ui/text small/regular | 16px |
| tiny | 24px | --space-micro --space-tiny | --space-micro | ui/text small/regular | 12px |
Durumlar
Hover primary tint çizgi çizer; Focus ve Active (açık) primary çizgi ve focus halkası. Error çizgiyi, placeholder’ı ve label’ı kırmızı yapar ve hata ikonunu ekler.
Tokenlar
| State | Background | Line | Shadow |
|---|---|---|---|
| default | --color-surface-level-1 | — | --shadow-card-style-1 |
| hover | --color-surface-level-1 | --color-primary-tint | --shadow-card-style-1 |
| focus / active | --color-surface-level-1 | --color-primary | --shadow-focus-primary |
| error | --color-surface-level-1 | --color-error | --shadow-card-style-1 |
| disabled | --color-surface-level-2 | --color-surface-level-4 | — |
Figma notları
- Duran kutunun çizgisi yok, yalnızca card style 1 gölgesi var; Input’ta ise surface/level-4 çizgi var.
- Kutu köşesi her boyutta ham 8px; kod --radius-form-element-small kullanır.
- Oklar Icons sayfasında olmayan “Icon/arrow down” ve “Icon/arrow up”; kod arrow-bottom ve arrow-top kullanır.
- Medium Error’da hata ikonu ile ok arasında 8px, diğer durumlarda 12px var.
- Inner Label yalnızca Medium’da var. Duran hâlinde label görünmüyor; kod, kutu odaklanana, açılana ya da dolana kadar label’ı placeholder olarak gösterir.
- Figma’da listede arama yok; searchable, Dropdown’un üstünde Cell Type=Search kullanır.
Figma’dan koda
| Figma | React |
|---|---|
| 🎛 Type = Basic | <Selectbox options value onChange /> |
| 🎛 Type = Inner Label | innerLabel="…" |
| 🎛 Type = Multiselect | multiple |
| 🎛 Type = Chip | multiple display="chips" |
| 👕 Size = Large / Medium / Small / Tiny | size='large' / 'medium' / 'small' / 'tiny' |
| Fluid = False | fluid={false} |
| Error / Disable | error / disabled |
| Form Selectbox | <FormField label hint><Selectbox /></FormField> |