Bileşenler

InputGroup

Metin denetimini önüne, arkasına, üstüne ya da altına gelen eklerle tek kutuda toplar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

InputGroup, Base UI Field içinde yerel bir <input> ya da <textarea> çizer. Etiket <label for> ile denetime bağlanır. Ek metinleri düz metindir ve denetimin adına girmez.

Klavye

Tuş	Davranış
Tab	Denetime, ardından ekteki butona odaklanır.
Enter, Space	Ekteki butonu çalıştırır.

Odak

Denetim odaktayken halka tüm kutuya çizilir (focus-within). Ekteki buton kendi odak halkasını gösterir.

Ekran okuyucu

Örnek	Okunan
Önek ve sonekli grup	“Alan etiketi, düzenleme metni”; ek metinleri sırasıyla ayrı okunur
Temizleme butonu	“Temizle, düğme”

Önek değerin anlamını değiştiriyorsa bunu yardım metninde de yazın; ekran okuyucu eki denetimden ayrı okur.

Kontrast

Ek metni color-text-subtle ile zeminde en az 4.5:1 kontrast taşır. Kutunun kenarlığı 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	InputGroup nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	`<label for>` ve `aria-describedby`.	Her gruba `label` verin.
1.3.2 Anlamlı sıra	Ekler DOM sırasında okunur.	Ekleri okunma sırasıyla yazın.
2.4.7 Görünür odak	Halka tüm kutuda.	Kutunun kenarlığını `className` ile değiştirmeyin.
4.1.2 Ad, rol, değer	Ekteki buton IconButton’dır ve adı vardır.	Ekteki işleme `label` verin.