Checkbox
Checkbox
Checkbox memungkinkan pengguna memilih satu atau beberapa opsi dari sekumpulan pilihan. Komponen ini sering digunakan pada bagian pengaturan, formulir, atau preferensi pengguna.
Penggunaan
Section titled “Penggunaan”Gunakan Checkbox untuk memberi pengguna pilihan satu atau beberapa opsi dalam satu kelompok. Tampilkan dalam kondisi aktif (terpilih), nonaktif (tidak terpilih), atau indeterminate (sebagian terpilih) sesuai konteks. Komponen ini membantu pengguna membuat pilihan tanpa harus berpindah halaman atau konteks.
Anatomi
Section titled “Anatomi”
State (keadaan)
Section titled “State (keadaan)”Default
Checkbox dalam keadaan belum dipilih.
'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/g%3e%3crect%20x='93.208'%20y='65.875'%20width='56.25'%20height='56.25'%20rx='13.125'%20stroke='%23E5E5E5'%20stroke-width='3.75'/%3e%3cdefs%3e%3cclipPath%20id='clip0_1468_84707'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Checked
Checkbox dipilih oleh pengguna.
'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='%231F1F1F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M137.378%2083.4177C138.42%2084.3658%20138.491%2085.9727%20137.535%2087.0069L121.437%20104.426C120.965%20104.937%20120.303%20105.234%20119.605%20105.249C118.907%20105.264%20118.233%20104.996%20117.739%20104.506L108.958%2095.7963C107.958%2094.8042%20107.958%2093.1958%20108.958%2092.2037C109.958%2091.2117%20111.58%2091.2117%20112.58%2092.2037L119.469%2099.0373L133.759%2083.5738C134.715%2082.5396%20136.335%2082.4697%20137.378%2083.4177Z'%20fill='white'/%3e%3c/g%3e%3crect%20x='95.083'%20y='67.75'%20width='52.5'%20height='52.5'%20rx='11.25'%20stroke='%231F1F1F'%20stroke-width='7.5'/%3e%3cdefs%3e%3cclipPath%20id='clip0_1468_84713'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Indeterminate
Menandakan status sebagian terpilih (biasanya digunakan dalam grup checkbox).
'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='%231F1F1F'/%3e%3cpath%20d='M104.458%2094H138.208'%20stroke='white'%20stroke-width='7.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3crect%20x='95.083'%20y='67.75'%20width='52.5'%20height='52.5'%20rx='11.25'%20stroke='%231F1F1F'%20stroke-width='7.5'/%3e%3cdefs%3e%3cclipPath%20id='clip0_1468_84719'%3e%3crect%20x='91.333'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Disabled
Checkbox tidak dapat diubah oleh pengguna.
'%3e%3crect%20x='91.335'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='%23F5F5F5'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M137.379%2083.4177C138.422%2084.3658%20138.493%2085.9727%20137.537%2087.0069L121.439%20104.426C120.967%20104.937%20120.305%20105.234%20119.607%20105.249C118.909%20105.264%20118.234%20104.996%20117.741%20104.506L108.96%2095.7963C107.96%2094.8042%20107.96%2093.1958%20108.96%2092.2037C109.96%2091.2117%20111.582%2091.2117%20112.582%2092.2037L119.471%2099.0373L133.761%2083.5738C134.717%2082.5396%20136.337%2082.4697%20137.379%2083.4177Z'%20fill='%23E5E5E5'/%3e%3c/g%3e%3crect%20x='94.1475'%20y='66.8125'%20width='54.375'%20height='54.375'%20rx='12.1875'%20stroke='%23E5E5E5'%20stroke-width='5.625'/%3e%3cdefs%3e%3cclipPath%20id='clip0_1468_84726'%3e%3crect%20x='91.335'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Hover / Focus
Memberikan umpan balik visual saat pointer berada di atas komponen atau ketika fokus menggunakan keyboard.
'%3e%3cg%20clip-path='url(%23clip0_1468_84732)'%3e%3crect%20x='91.335'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/g%3e%3crect%20x='93.21'%20y='65.875'%20width='56.25'%20height='56.25'%20rx='13.125'%20stroke='%23E5E5E5'%20stroke-width='3.75'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_1468_84732'%20x='83.835'%20y='56.5'%20width='75'%20height='75'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeMorphology%20radius='7.5'%20operator='dilate'%20in='SourceAlpha'%20result='effect1_dropShadow_1468_84732'/%3e%3cfeOffset/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.952941%200%200%200%200%200.952941%200%200%200%200%200.952941%200%200%200%201%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_1468_84732'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_1468_84732'%20result='shape'/%3e%3c/filter%3e%3cclipPath%20id='clip0_1468_84732'%3e%3crect%20x='91.335'%20y='64'%20width='60'%20height='60'%20rx='15'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Cara Penggunaan yang Disarankan
Section titled “Cara Penggunaan yang Disarankan”Multiple Checkbox
Pengguna dapat memilih lebih dari satu checkbox secara bersamaan dalam satu grup.
Indeterminate
Digunakan untuk menampilkan status sebagian terpilih yang dikontrol oleh sistem, misalnya ketika hanya beberapa anak checkbox yang dipilih.
Click Area
Klik pada area label juga dapat men-trigger checkbox, bukan hanya pada kotak centangnya.
Penerapan
Section titled “Penerapan”Saringan (Filter)
Checkbox sangat efektif untuk fungsi filtering karena memungkinkan pengguna mempersempit hasil dengan memilih beberapa kriteria secara bersamaan.
Multiple Selection (Pemilihan Lebih dari Satu)
Gunakan apabila pengguna dapat memilih beberapa item dari daftar yang tersedia.
Spesifikasi
Section titled “Spesifikasi”