Kotak centang

checkbox() merender <label> yang membungkus <input type="checkbox"> sungguhan beserta kotak yang Anda lihat. Masukannya tersembunyi secara visual tetapi tetap ada, jadi ia bisa difokus, ikut terkirim, dan seluruh labelnya menjadi sasaran sentuh — tanda centangnya digambar dari keadaan :checked milik masukan itu sendiri, tanpa skrip apa pun.

Kotak centang dasar

Kirimi saya pembaruan lewat emailTercentang

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Kirimi saya pembaruan lewat email', name: 'updates' }),
  checkbox({ label: 'Tercentang', name: 'checked', checked: true }),
)

Warna

stack({ direction: 'row', gap: 'lg', wrap: true },
  checkbox({ label: 'Primary', checked: true, color: 'primary' }),
  checkbox({ label: 'Neutral', checked: true, color: 'neutral' }),
  checkbox({ label: 'Success', checked: true, color: 'success' }),
  checkbox({ label: 'Warning', checked: true, color: 'warning' }),
  checkbox({ label: 'Danger', checked: true, color: 'danger' }),
)

Dinonaktifkan

Tidak tersediaMenyala, dan terkunci

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Tidak tersedia', disabled: true }),
  checkbox({ label: 'Menyala, dan terkunci', checked: true, disabled: true }),
)

Label panjang

Kotaknya tetap sejajar dengan baris pertama alih-alih memusatkan diri terhadap satu paragraf.

Jalankan audit Lighthouse setelah setiap build, dan gagalkan build ketika sebuah skor jatuh di bawah ambangnya.

checkbox({
  label: 'Jalankan audit Lighthouse setelah setiap build, dan gagalkan build ketika sebuah skor jatuh di bawah ambangnya.',
  name: 'lighthouse',
  checked: true,
})

Grup

choiceGroup() membangun sekumpulan kotak centang dari data, dengan legenda dan nama bersama. Berikan sebuah larik sebagai value untuk mencentang beberapa sekaligus.

Hasilkan

sitemap.xmlrss.xmlIndeks Pagefind

Masing-masing ditulis ke dalam dist/ di akhir build.

choiceGroup({
  legend: 'Hasilkan',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Indeks Pagefind' },
  ],
  help: 'Masing-masing ditulis ke dalam dist/ di akhir build.',
})

Dalam satu baris

Kategori

performanceaccessibilityseo

choiceGroup({
  legend: 'Kategori',
  name: 'categories',
  type: 'checkbox',
  direction: 'row',
  value: ['performance'],
  options: ['performance', 'accessibility', 'seo'],
})

Dengan sebuah bidang

Satu kotak centang jarang butuh label lagi di atasnya. Ketika sebuah grup membutuhkannya, field() memberinya perlakuan label, bantuan, dan galat yang sama seperti bidang teks.

KetentuanSaya menerima ketentuannya

Anda perlu menerima ketentuannya untuk melanjutkan.

field({ label: 'Ketentuan', error: 'Anda perlu menerima ketentuannya untuk melanjutkan.' },
  checkbox({ label: 'Saya menerima ketentuannya', name: 'terms', color: 'danger' }),
)

Props

Prop	Tipe	Bawaan	Deskripsi
`label`	`Child`	—	Teks di samping kotaknya. Lewati untuk kendali telanjang.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Warna saat tercentang.
`checked`	`boolean`	`false`	Apakah ia mulai dalam keadaan tercentang.
`name`	`string`	—	Nama bidang formulir.
`value`	`string \| number`	—	Nilai yang dikirim saat tercentang.
`disabled`	`boolean`	`false`	Menonaktifkan masukannya dan meredupkan labelnya.

Selebihnya mendarat pada <input>, bukan labelnya — jadi required, onchange, dan data-* pergi ke tempat yang Anda duga. Gunakan class untuk menata labelnya sendiri.

Untuk kumpulan yang dibangun dari data, lihat choiceGroup() di halaman Grup radio — ia menerima opsi yang sama untuk keduanya, dialihkan lewat type: 'checkbox'.