Yerleşim · Tabs

Sekmeler

Aynı alanda birbirini dışlayan içerik bölümleri arasında geçiş yapar.

CSS: kararlı
JavaScript: klavye desteği
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Başvurunuz 12 Mart 2026 tarihinde alındı.

HTML kodunu göster

<div class="trds-sekmeler" data-trds="sekmeler">
  <div class="trds-sekmeler__liste" role="tablist" aria-label="Başvuru bilgileri">
    <button class="trds-sekmeler__dugme" role="tab" aria-selected="true" aria-controls="p1" id="s1">Genel</button>
    <button class="trds-sekmeler__dugme" role="tab" aria-selected="false" aria-controls="p2" id="s2" tabindex="-1">Belgeler</button>
  </div>
  <div class="trds-sekmeler__panel" role="tabpanel" id="p1" aria-labelledby="s1" tabindex="0">
    <p class="trds-govde">Başvurunuz 12 Mart 2026 tarihinde alındı.</p>
  </div>
  <div class="trds-sekmeler__panel" role="tabpanel" id="p2" aria-labelledby="s2" tabindex="0" hidden>
    <p class="trds-govde">İki belge eksik.</p>
  </div>
</div>

Ne zaman kullanılır

İçerik bölümleri eş değerdeyse ve karşılaştırma gerekmiyorsa kullanın.
Bir formun adımları için kullanmayın. Adım göstergesi kullanın.
Mobil ekranda sekmeler akordiyona dönüşür.

Erişilebilirlik

Ok tuşları sekmeler arasında gezinir. Home ve End uçlara gider.
Etkin sekme aria-selected="true" taşır.
Panel role="tabpanel" ve tabindex="0" taşır.

Karşılanan WCAG 2.2 ölçütleri 2.1.1 2.4.3 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FR, IE, KR, JP, DK, DE, NO.