Lompat ke isi
CirccaHIG

Komponen / Aksi

SegmentedControl

Pengalih 2–5 tampilan yang saling eksklusif untuk isi yang sama: Daftar / Board, Minggu / Bulan / Kuartal. Pilihan langsung berlaku.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk mengganti cara menampilkan data yang sama: Daftar / Board / Kalender, Minggu / Bulan / Kuartal.
  • Batasi 2–5 segmen berlabel pendek dan sejajar ("Daftar", "Board"), panjang label kira-kira setara.
  • Letakkan di toolbar atau header kartu, dekat isi yang dikendalikannya.
  • Selalu ada satu segmen terpilih; pilihan langsung berlaku.

Hindari

  • Jangan memakai untuk berpindah antar-bagian dokumen yang isinya berbeda (Ringkasan / Item / Riwayat) — itu Tabs.
  • Jangan memakai untuk mengisi nilai field form yang ikut disimpan (Tipe PO, Mata uang) — pakai Radio atau Select.
  • Jangan memakai untuk aksi (Simpan / Batal) atau untuk pilihan lebih dari 5 — pakai Button atau Select.
  • Jangan menyembunyikan segmen yang belum tersedia; nonaktifkan agar susunan tetap stabil.

Contoh benar & salah

Pipeline deal
Lisensi M365 — PT Mitra EnergiRp 186 jt
Implementasi BizOps — CV SinarRp 420 jt
GunakanMengganti tampilan data yang sama (Daftar / Board) di toolbar.
PO-2026-0142
Customer: PT Mitra Energi Persada
HindariBerpindah antar-bagian dokumen yang isinya berbeda — pakai Tabs.
Mata uang
GunakanNilai field form (Mata uang) dipilih dengan Radio di dalam FormField.
Mata uang
HindariNilai yang ikut disimpan dipilih lewat SegmentedControl.

Penulisan

  • Label berupa kata benda atau periode, satu-dua kata: "Daftar", "Board", "Bulan".
  • Huruf kapital hanya di awal; tanpa titik dan tanpa ikon tambahan.
  • Usahakan panjang label setara agar segmen seimbang; label panjang tetap satu baris (segmen melebar).

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil