Input & label

Setiap kolom punya label, petunjuk opsional, dan pesan galat. Tinggi baku 40px. Fokus memakai --ck-ring.

Kolom dasar

Label selalu di atas kolom. Petunjuk ditaruh di bawah, galat menggantikan petunjuk.

Nama lengkap

Email Dipakai untuk masuk dan menerima notifikasi.

Kelas

NISN NISN harus 10 digit angka.

Lihat kode

<div class="ck-grid ck-grid-2">
  <div class="ck-field">
    <label class="ck-label" for="f-nama">Nama lengkap</label>
    <input class="ck-input" id="f-nama" placeholder="Andi Pratama">
  </div>
  <div class="ck-field">
    <label class="ck-label" for="f-email">Email</label>
    <input class="ck-input" id="f-email" type="email" placeholder="nama@sekolah.id">
    <span class="ck-hint">Dipakai untuk masuk dan menerima notifikasi.</span>
  </div>
  <div class="ck-field">
    <label class="ck-label" for="f-kelas">Kelas</label>
    <select class="ck-select" id="f-kelas"><option>X IPA 1</option><option>X IPA 2</option><option>XI IPS 3</option></select>
  </div>
  <div class="ck-field">
    <label class="ck-label" for="f-galat">NISN</label>
    <input class="ck-input" id="f-galat" value="1234" aria-invalid="true">
    <span class="ck-error">NISN harus 10 digit angka.</span>
  </div>
</div>

Area teks, nonaktif, dan dengan ikon

Pencarian memakai ck-input-group supaya ikon tidak menutupi teks.

Deskripsi kuis

Token ujian (dikunci admin)

Lihat kode

<div class="ck-stack ck-stack-4">
  <div class="ck-input-group"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="ck-input" placeholder="Cari kuis, course, atau soal…"></div>
  <div class="ck-field">
    <label class="ck-label" for="f-desc">Deskripsi kuis</label>
    <textarea class="ck-textarea" id="f-desc" placeholder="Tulis instruksi singkat untuk siswa…"></textarea>
  </div>
  <div class="ck-field">
    <label class="ck-label" for="f-dis">Token ujian (dikunci admin)</label>
    <input class="ck-input" id="f-dis" value="TERKUNCI" disabled>
  </div>
</div>

Kisi formulir dua kolom

Untuk formulir panjang, susun dua kolom dan biarkan kolom penuh untuk catatan.

Judul kuis

Durasi (menit)

Mulai

Selesai

Catatan untuk siswa

Lihat kode

<div class="ck-card"><div class="ck-card__body ck-p-6 ck-grid ck-grid-2">
  <div class="ck-field"><label class="ck-label" for="g1">Judul kuis</label><input class="ck-input" id="g1" placeholder="Kuis Matematika — Bab 3"></div>
  <div class="ck-field"><label class="ck-label" for="g2">Durasi (menit)</label><input class="ck-input" id="g2" type="number" value="45"></div>
  <div class="ck-field"><label class="ck-label" for="g3">Mulai</label><input class="ck-input" id="g3" type="datetime-local"></div>
  <div class="ck-field"><label class="ck-label" for="g4">Selesai</label><input class="ck-input" id="g4" type="datetime-local"></div>
  <div class="ck-field" style="grid-column:1/-1"><label class="ck-label" for="g5">Catatan untuk siswa</label><textarea class="ck-textarea" id="g5" placeholder="Satu kali percobaan, tanpa kalkulator."></textarea></div>
</div>
<div class="ck-card__footer" style="padding:0 1.5rem 1.5rem"><button class="ck-btn ck-btn--default">Simpan kuis</button><button class="ck-btn ck-btn--ghost">Batal</button></div></div>