Lompat ke isi
CirccaHIG

Komponen / Tata letak

GroupedList

Daftar berkelompok inset ala Settings untuk halaman pengaturan, inspector, dan form ringkas di ponsel: judul grup, kartu berisi baris label + nilai/kontrol, dan keterangan di bawahnya.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk halaman pengaturan (notifikasi, profil perusahaan, pajak) dan form pendek di inspector atau ponsel.
  • Kelompokkan baris yang berhubungan; judul grup kata benda ("Notifikasi email", "Perusahaan").
  • Pakai footer grup untuk menjelaskan akibat pengaturan atau siapa yang mengaturnya.
  • Switch di GroupedList berlaku langsung — tanpa tombol Simpan.

Hindari

  • Jangan memakai GroupedList untuk detail dokumen hanya-baca yang panjang — pakai DescriptionList.
  • Jangan mencampur baris navigasi dan kontrol dalam satu baris (chevron + Switch).
  • Jangan memakai GroupedList untuk form dokumen utama (PO, invoice) — pakai FormField dalam tata letak form.
  • Jangan menaruh lebih dari ±8 baris dalam satu grup; pecah menjadi grup berjudul.

Contoh benar & salah

Notifikasi email

Perusahaan

  • Mata uangIDR

Diatur Admin Keuangan.

GunakanBaris dikelompokkan per topik dengan judul dan keterangan grup.
  • Mata uangIDR
  • PajakPPN 11%
HindariSemua pengaturan dalam satu kartu panjang tanpa judul.

Notifikasi

GunakanSatu baris satu jenis: navigasi (chevron) atau kontrol (Switch).

Notifikasi

HindariChevron dan Switch dalam satu baris sehingga tidak jelas apa yang terjadi saat diklik.

Penulisan

  • Label baris kata benda atau frasa pendek ("Invoice jatuh tempo"), bukan kalimat perintah.
  • Nilai di baris navigasi meringkas isi halaman tujuan ("2 rekening", "PPN 11%").
  • Footer grup kalimat lengkap dengan titik.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil