Pilih (select) — classroom-themekit

Pilihan dasar

Satu pilihan dari daftar pendek.

Kelas Panah atas/bawah, Home, End, Enter, dan Esc semuanya jalan.

Lihat kode

<div class="ck-field">
  <label class="ck-label" for="sel-kelas">Kelas</label>
  <select class="ck-select" id="sel-kelas">
    <option>X IPA 1</option>
    <option>X IPA 2</option>
    <option>XI IPS 3</option>
    <option>XII Bahasa 1</option>
  </select>
</div>

Dengan pencarian

Daftar panjang dapat kotak pencarian di kepala panel.

Siswa Lebih dari 8 pilihan otomatis dapat kotak pencarian.

Lihat kode

<div class="ck-field">
  <label class="ck-label" for="sel-siswa">Siswa</label>
  <select class="ck-select" id="sel-siswa">
    <option>Anindya Putri</option>
    <option>Bagas Nugroho</option>
    <option>Citra Larasati</option>
    <option>Dimas Saputra</option>
    <option>Endah Wulandari</option>
    <option>Fajar Ramadhan</option>
    <option>Gita Permata</option>
    <option>Hendra Kusuma</option>
    <option>Indah Cahyani</option>
    <option>Joko Susilo</option>
    <option>Kartika Dewi</option>
  </select>
</div>

Dengan keterangan

Tiap pilihan bisa punya baris keterangan sendiri.

Mata pelajaran Baris kedua diambil dari atribut data-ck-deskripsi.

Lihat kode

<select class="ck-select" id="sel-mapel">
  <option value="mtk" data-ck-deskripsi="4 jam pelajaran per minggu">Matematika</option>
  <option value="fis" data-ck-deskripsi="3 jam pelajaran per minggu">Fisika</option>
</select>

Berkelompok

optgroup tetap dihormati dan tampil sebagai label kelompok.

Rombel Label kelompok ikut disembunyikan saat pencarian tidak menemukan isinya.

Lihat kode

<select class="ck-select" id="sel-rombel" data-ck-select-cari="selalu">
  <optgroup label="Tingkat X">
    <option>X IPA 1</option>
    <option>X IPA 2</option>
  </optgroup>
  <optgroup label="Tingkat XI">
    <option>XI IPA 1</option>
    <option>XI IPS 3</option>
  </optgroup>
</select>

Terkunci dan galat

Keadaan nonaktif dan tidak valid ikut token tema.

Terkunci Rombel sudah dikunci admin.

Wali kelas Wali kelas wajib dipilih.

Lihat kode

<select class="ck-select" id="sel-terkunci" disabled>…</select>
<select class="ck-select" id="sel-galat" aria-invalid="true">…</select>

Lebar terbatas

Kelas lebar tetap berlaku karena ikut pindah ke pembungkus.

Tahun ajaran Kelas ck-field--12 dipindah ke pembungkus oleh skrip, jadi lebarnya tetap 12rem di desktop dan penuh di HP.

Lihat kode

<select class="ck-select ck-field--12" id="sel-tahun">
  <option>2025/2026</option>
  <option>2026/2027</option>
</select>

Pilihan bawaan

Jalan keluar kalau memang butuh daftar sistem.

Pilihan bawaan peramban Atribut data-ck-select="asli" mematikan peningkatan — dipakai kalau memang butuh daftar bawaan sistem.

Lihat kode

<select class="ck-select" data-ck-select="asli">
  <option>X IPA 1</option>
  <option>X IPA 2</option>
</select>

Atribut

Semua opsional. Tanpa satu pun dari ini, select tetap ditingkatkan dengan setelan bawaan.

Atribut	Letak	Arti
`data-ck-select="asli"`	`<select>`	Jangan ditingkatkan; pakai daftar bawaan peramban.
`data-ck-select-cari`	`<select>`	`selalu` memaksa kotak pencarian, `tidak` mematikannya. Bawaan: muncul kalau pilihan lebih dari 8.
`data-ck-select-cari-label`	`<select>`	Teks placeholder kotak pencarian (bawaan "Cari…").
`data-ck-select-placeholder`	`<select>`	Teks saat belum ada pilihan.
`data-ck-deskripsi`	`<option>`	Baris keterangan kecil di bawah label pilihan.