2-4 birbirini dışlayan seçenek arasında hızlı geçiş. Tab'dan farkı: tüm seçenekler eşit önemde, içerik aynı sayfada filtrelenir; tab ise sayfalar arası gezer. Radio'dan farkı: yatay, dolu yüzey, hızlı tıklama hedefi. 4'ten fazla seçenek için Select'e geç.
01 · Boyut
sm
md · default
lg
02 · İkon, sayaç, full-width
İkon + metin
İkon-only · view toggle
Sayaçlı · sipariş filtresi
Full-width · mobil tab alternatifi (3 segment)
Kurallar
· 2-4 segment ideal, 5 maksimum. Daha fazlası segment yüksekliğini ezer; Select'e geç.
· Etiketler kısa (≤2 kelime), aynı uzunlukta olması ideal — segment genişlikleri eşit kalır.
· Aktif segment beyaz/koyu yüzey + 1px shadow. Border kullanılmaz; iç segment ayraçları yok.
· İkon-only kullanımda mutlaka title + aria-label.
· Erişilebilirlik: role="radiogroup" + her button role="radio" + aria-checked; ←→ ile gezinme; ⏎/Space seçim.
· Yasak: 5'ten çok segment, segment içinde 2 satır metin, segmented control üstüne floating label.