Bileşenler

Item Selector

Klasör tarayıcısı gibi kendi seçicinizi açan ve seçileni, değiştirmek için bir chip ile gösteren alan.

TasarımcıGeliştirici

Playground

Figma varyantı

🕹 State=Default
Selected=False
Disabled=False
Error=False
Label=False
Hint=False
Form Spacing=False

Durumlar

Boşken placeholder medium-emphasis görünür; seçiliyken öğe high-emphasis görünür. Hover primary tint çizgi, Error hata çizgisi çizer; Disabled metni griye çevirir.

Tokenlar

Part	Token
Box	`--color-surface-level-2, --radius-form-element-small`
Padding	`--space-tiny --space-medium`
Placeholder / value	`--color-foreground-medium-emphasis / --color-foreground-high-emphasis`
Chip	`--color-surface-level-3, --radius-full`
Hover / error line	`--color-primary-tint / --color-error`
Disabled text	`--color-foreground-low-emphasis`

Figma notları

Metin eski “Paragraph / Regular” stilini (14/24) kullanıyor; kod aynı boyuttaki ui/text/regular’ı kullanır.
Eylem chip’i, HK Grotesk Medium 12px metinli, kullanımdan kalkmış “Chips” bileşeni; kod onu ui/text small/bold ve Chip tokenlarıyla çizer.
Kutunun köşesi ham 8px; kod --radius-form-element-small kullanır.
Her varyantın içinde hiç görünmeyen gizli bir link Button var.
Figma’da focus durumu yok; kod primary çizgi ve focus halkası ekler.

Figma’dan koda

Figma	React
Selected = True	`value="…"`
Error / Disabled	`error / disabled`
Label / Hint / Form Spacing	`<FormField label hint spacing><ItemSelector /></FormField>`
🕹 State = Hover	`:hover`