Notifications
Mark all as read
Order Completed
Your order #1234 has been completed successfully
5 minutes ago
New Message
You have a new message from John Doe
10 minutes ago
Storage Warning
Your storage is almost full (90% used)
1 hour ago
New User Registered
Sarah Wilson just joined your team
2 hours ago
Payment Failed
Payment for invoice #5678 failed
Yesterday
View all notifications

Form Inputs

Variasi input teks, disabled, dan helper text
Basic States Help text
Anatomi field
Label, input, hint, dan pesan error.
Label selalu terlihat, gunakan kalimat natural.
Placeholder sebagai contoh isi, bukan pengganti label.
Helper text memperjelas aturan atau format yang diharapkan.
Tips microcopy
Tunjukkan tujuan field secara spesifik.
  • Gunakan kata kerja aktif seperti “Masukkan”, “Pilih”.
  • Jelaskan satu informasi per field.
  • Simpan validasi negatif untuk bagian error message.
Cek aksesibilitas
Field harus mudah diakses keyboard dan screen reader.
  • Gunakan elemen <label for> terhubung ke id.
  • Pastikan kontras border/error memenuhi standar WCAG.
  • Sediakan pesan bantuan yang dibacakan dengan aria-describedby.
Pola input dasar

Selalu lengkapi label, placeholder, dan status wajib.

Gunakan tanda bintang untuk menandai field wajib dan jelaskan aturan pengisian.
HTML
<label class="form-label">Full name <span class="text-danger">*</span></label>
<input type="text" class="form-control" placeholder="John Doe" required>
State & validasi

Tunjukkan status input melalui warna border dan pesan singkat.

Contoh tampilan saat input menerima fokus.
Nama wajib diisi minimal 3 karakter.
HTML
<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Nama wajib diisi minimal 3 karakter.</div>
Help & inline hint

Berikan konteks tambahan untuk mengurangi kesalahan input.

Gunakan URL lengkap termasuk protokol.
Gunakan kombinasi huruf, angka, dan simbol.
HTML
<input type="url" class="form-control" placeholder="https://example.com">
<div class="form-text">Gunakan URL lengkap termasuk protokol.</div>
Ukuran & variasi input

Sesuaikan tinggi input untuk hierarki atau kepadatan data.

https://
HTML
<div class="input-group input-group-lg">
  <span class="input-group-text">https://</span>
  <input class="form-control" placeholder="domain.com">
</div>
Floating label

Memberikan label selalu terlihat sembari menghemat ruang vertikal.

HTML
<div class="form-floating">
  <input type="email" class="form-control" id="flEmail" placeholder="name@example.com">
  <label for="flEmail">Alamat email</label>
</div>