Seçim · Multi-select

Çoklu seçim

Uzun bir listeden birden çok seçim. Yazarak süzülür, seçilenler etiket olur.

CSS: kararlı
JavaScript: süzme, seçim etiketi
React: kararlı
Vue: kararlı

Örnekler

İller Canlı örnek

Hizmet verilen iller

Yazın ve listeden seçin. Birden çok il seçebilirsiniz.

HTML kodunu göster

<div class="kiris-alan kiris-coklu" data-kiris="coklu-secim">
  <label class="kiris-etiket" for="iller" id="iller-etiket">Hizmet verilen iller</label>
  <p class="kiris-yardim" id="iller-yardim">Yazın ve listeden seçin. Birden çok il seçebilirsiniz.</p>
  <div class="kiris-coklu__secilenler" aria-label="Seçilen iller" hidden></div>
  <input class="kiris-girdi" id="iller" type="text" role="combobox" hidden aria-autocomplete="list" aria-expanded="false" aria-controls="iller-liste" aria-describedby="iller-yardim" autocomplete="off">
  <div class="kiris-coklu__liste" id="iller-liste" role="listbox" aria-multiselectable="true" aria-label="İller" hidden>
    <div class="kiris-coklu__oge" role="option" id="il-06" data-deger="06" aria-selected="true">Ankara</div><div class="kiris-coklu__oge" role="option" id="il-34" data-deger="34" aria-selected="false">İstanbul</div><div class="kiris-coklu__oge" role="option" id="il-35" data-deger="35" aria-selected="false">İzmir</div><div class="kiris-coklu__oge" role="option" id="il-16" data-deger="16" aria-selected="false">Bursa</div><div class="kiris-coklu__oge" role="option" id="il-07" data-deger="07" aria-selected="false">Antalya</div><div class="kiris-coklu__oge" role="option" id="il-42" data-deger="42" aria-selected="false">Konya</div><div class="kiris-coklu__oge" role="option" id="il-01" data-deger="01" aria-selected="false">Adana</div><div class="kiris-coklu__oge" role="option" id="il-27" data-deger="27" aria-selected="false">Gaziantep</div>
  </div>
  <p class="kiris-gorsel-gizli" data-kiris-durum aria-live="polite"></p>
  <select class="kiris-secim kiris-coklu__yerel" id="iller-yerel" name="iller" multiple aria-labelledby="iller-etiket"><option value="06" selected>Ankara</option><option value="34">İstanbul</option><option value="35">İzmir</option><option value="16">Bursa</option><option value="07">Antalya</option><option value="42">Konya</option><option value="01">Adana</option><option value="27">Gaziantep</option></select>
</div>

Ne zaman kullanılır

Seçenek sayısı 10 üstündeyse ve birden çok seçim gerekiyorsa kullanın.
Seçenek 10 altındaysa onay kutusu kullanın.

Erişilebilirlik

ARIA 1.2 combobox ve aria-multiselectable liste. Enter seçer ve kaldırır, Backspace son etiketi kaldırır.
Yerel bir <select multiple> formu taşır. Betik yoksa yalnız o görünür ve tek başına çalışır. Betik onu gizler ve zenginleştirilmiş alanı açar.
Seçilenler canlı bölgeden duyurulur.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 4.1.2 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FI, IE, FR, CH.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-multi-select ile başlayan sınıflar
Davranış betiği, data-kiris="coklu-secim" başlatıcısı