Label & pilihan kartu

Dua kendali yang sering dipakai di formulir bank soal: label topik yang bisa dilepas, dan pilihan tipe soal berbentuk kartu besar supaya keterangannya terbaca.

Label yang bisa dilepas

Setiap chip punya tombol hapus dengan aria-label yang menyebut labelnya, supaya pembaca layar tetap jelas.

TurunanAturan rantaiKelas XIISulit

Lihat kode

<div class="ck-tags">
<span class="ck-tag">Turunan<button type="button" aria-label="Hapus label Turunan"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span><span class="ck-tag">Aturan rantai<button type="button" aria-label="Hapus label Aturan rantai"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span><span class="ck-tag">Kelas XII<button type="button" aria-label="Hapus label Kelas XII"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span><span class="ck-tag">Sulit<button type="button" aria-label="Hapus label Sulit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span></div>

Pilihan kartu

Untuk pilihan yang butuh penjelasan, kartu lebih baik daripada radio kecil. Keadaan terpilih memakai --picked.

Pilihan gandaSatu jawaban benar, dinilai otomatis. UraianDinilai manual oleh guru. MenjodohkanPasangkan dua kolom. Benar / salahPernyataan tunggal.

Lihat kode

<div class="ck-grid ck-grid-2 ck-gap-3" style="max-width:38rem">
<label class="ck-choice ck-choice--picked">
  <span class="ck-choice__mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 12 5 5L20 6"/></svg></span>
  <span><b>Pilihan ganda</b><span>Satu jawaban benar, dinilai otomatis.</span></span>
</label><label class="ck-choice">
  <span class="ck-choice__mark"></span>
  <span><b>Uraian</b><span>Dinilai manual oleh guru.</span></span>
</label><label class="ck-choice">
  <span class="ck-choice__mark"></span>
  <span><b>Menjodohkan</b><span>Pasangkan dua kolom.</span></span>
</label><label class="ck-choice">
  <span class="ck-choice__mark"></span>
  <span><b>Benar / salah</b><span>Pernyataan tunggal.</span></span>
</label></div>

Tombol bersegmen

Untuk pilihan cepat berulang, seperti menandai kehadiran satu kelas. Keadaan aktif memakai aria-pressed.

Anindya Putri

Lihat kode

<div class="ck-row ck-row-2 ck-gap-3 ck-between" style="max-width:30rem">
  <span class="ck-text">Anindya Putri</span>
  <span class="ck-seg"><button type="button" aria-pressed="true">Hadir</button><button type="button" aria-pressed="false">Sakit</button><button type="button" aria-pressed="false">Izin</button><button type="button" aria-pressed="false">Alfa</button></span>
</div>