Sakelar

Sakelar dipakai untuk pengaturan yang berlaku begitu ia dibalik. Kotak centang dipakai untuk pilihan yang Anda konfirmasi kemudian, dengan tombol kirim. Jika kendali Anda duduk dalam formulir yang punya Simpan di bawahnya, itu kotak centang.

Komponennya bernama toggle() alih-alih switch() karena alasan membosankan yang tak terhindarkan: switch adalah kata kunci, jadi ia tidak bisa menjadi pengikat impor. Di baliknya ada <input type="checkbox"> sungguhan yang membawa role="switch".

Sakelar dasar

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Situs publik', name: 'public' }),
  toggle({ label: 'Nyala', name: 'on', checked: true }),
)

Warna

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

Dinonaktifkan

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Mati, dan terkunci', disabled: true }),
  toggle({ label: 'Nyala, dan terkunci', checked: true, disabled: true }),
)

Tanpa label

Sakelar tanpa label yang terlihat tetap butuh nama yang dapat diakses. Berikan aria-label — ia jatuh ke masukannya.

toggle({ 'aria-label': 'Aktifkan pencarian Pagefind', checked: true })

Daftar pengaturan

Bentuk yang lazim: labelnya di kiri, sakelarnya di kanan, satu baris per pengaturan.

  • Pencarian Pagefind
    Mengindeks setiap halaman di akhir build.
  • Optimasi gambar
    Mengubah ukuran dan mengonversi gambar saat build. Butuh sharp.
  • Island server
    Merender bagian yang ditandai saat permintaan datang.
return list(
  [
    ['Pencarian Pagefind', 'Mengindeks setiap halaman di akhir build.', true],
    ['Optimasi gambar', 'Mengubah ukuran dan mengonversi gambar saat build. Butuh sharp.', true],
    ['Island server', 'Merender bagian yang ditandai saat permintaan datang.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

PropTipeBawaanDeskripsi
labelChild—Teks di samping sakelarnya. Pakai aria-label ketika tidak ada.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Warna jalurnya saat nyala.
checkedbooleanfalseApakah ia mulai dalam keadaan nyala.
namestring—Nama bidang formulir.
disabledbooleanfalseMenonaktifkan masukannya dan meredupkan barisnya.

Selebihnya jatuh ke <input>, dan di sanalah onchange serta aria-* seharusnya berada.