Tut Wuri HandayaniSeragam Design System

Menu

Select

Komponen antarmuka yang memungkinkan pengguna memilih satu opsi dari daftar yang tersedia. Ketika pengguna mengklik atau mengetuk komponen ini, sebuah dropdown (menu tarik-turun) akan muncul, menampilkan daftar opsi yang bisa dipilih.

Anatomi

Select Anatomy

Jenis dan variasi

Default Select

Menggunakan dropdown bawaan dari browser atau sistem operasi. Biasanya sederhana dan konsisten dengan antarmuka platform.
Select Default

Custom Select

Menggunakan dropdown yang dirancang khusus, bukan bawaan browser atau sistem operasi. Memberikan fleksibilitas dalam gaya dan fungsi.

Select Custom

Custom List Menu

Dalam beberapa kasus, komponen Select digunakan sebagai entry point untuk membuka Modal. Modal ini berfungsi seperti Select, namun dapat menampilkan lebih banyak informasi dan konteks. Contoh ini termasuk dalam kategori Custom List Menu.

Select Custom Image

Behaviors

State dan umpan balik visual

Komponen Select memiliki beberapa state utama:

Select States

  • Default: Saat tidak ada interaksi yang dilakukan.
  • Focused: Saat pengguna memilih atau berinteraksi dengan komponen.
  • Disabled: Saat komponen dinonaktifkan dan tidak dapat digunakan.
  • Error: Saat terjadi kesalahan input oleh pengguna, seperti memilih opsi yang tidak valid.

Panduan penggunaan

Kapan menggunakan

  • Menghemat ruang antarmuka: Select cocok untuk tampilan dengan banyak opsi (lebih dari 5) agar tidak memakan tempat.
  • Data yang dinamis: Cocok untuk pilihan yang dapat berubah seiring waktu, seperti daftar kategori yang terus bertambah. Komponen Select membantu menjaga tampilan tetap terorganisir, dengan konten yang fleksibel dan mudah disesuaikan.

Hindari penggunaan (dengan pertimbangan)

  • Opsi tetap dan sedikit: Jika hanya ada maksimal 3 opsi yang bersifat tetap dan tidak berubah, sebaiknya gunakan Radio dengan label. Komponen ini memberikan interaksi yang lebih cepat, sederhana, dan langsung bagi pengguna.