Centang & radio

Kotak centang untuk banyak pilihan, radio untuk satu pilihan. Ukuran sasaran 18px, seluruh baris bisa diklik lewat <label>.

Centang

Termasuk keadaan tidak pasti (indeterminate) yang dipakai pada kotak “pilih semua”.

Acak urutan soal Tampilkan jawaban benar setelah selesai Kunci setelah dikumpulkan (tidak tersedia)

Lihat kode

<div class="ck-stack ck-stack-2">
  <label class="ck-check"><input type="checkbox" checked> Acak urutan soal</label>
  <label class="ck-check"><input type="checkbox"> Tampilkan jawaban benar setelah selesai</label>
  <label class="ck-check"><input type="checkbox" disabled> Kunci setelah dikumpulkan (tidak tersedia)</label>
</div>

Radio

Untuk pilihan tunggal seperti visibilitas soal.

Hanya kelas ini Semua kelas yang saya ajar Terbuka untuk lembaga

Lihat kode

<div class="ck-stack ck-stack-2">
  <label class="ck-check"><input type="radio" name="vis" checked> Hanya kelas ini</label>
  <label class="ck-check"><input type="radio" name="vis"> Semua kelas yang saya ajar</label>
  <label class="ck-check"><input type="radio" name="vis"> Terbuka untuk lembaga</label>
</div>

Baris tabel dengan pilih semua

data-ck-check-all menautkan kotak induk ke semua kotak baris.

Soal	Mapel	Poin
Persamaan kuadrat	Matematika	5
Hukum Newton	Fisika	4
Reaksi redoks	Kimia	5

Lihat kode

<div class="ck-table-wrap">
  <table class="ck-table ck-table--compact">
    <thead><tr><th style="width:2.5rem"><input type="checkbox" data-ck-check-all="#tbl-soal" aria-label="Pilih semua"></th><th>Soal</th><th>Mapel</th><th class="ck-num">Poin</th></tr></thead>
    <tbody id="tbl-soal">
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td><td>Persamaan kuadrat</td><td>Matematika</td><td class="ck-num">5</td></tr>
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td><td>Hukum Newton</td><td>Fisika</td><td class="ck-num">4</td></tr>
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td><td>Reaksi redoks</td><td>Kimia</td><td class="ck-num">5</td></tr>
    </tbody>
  </table>
</div>