Onay kutusu

checkbox(), gerçek bir <input type="checkbox"> ile gördüğünüz kutuyu saran bir <label> işler. Girdi görsel olarak gizlidir ama yerindedir, bu yüzden odaklanabilir, gönderilir ve bütün etiket bir vuruş hedefidir — işaret, hiçbir betik karışmadan girdinin kendi :checked durumundan çizilir.

Temel onay kutusu

Güncellemeleri e-postayla gönderİşaretli

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Güncellemeleri e-postayla gönder', name: 'updates' }),
  checkbox({ label: 'İşaretli', name: 'checked', checked: true }),
)

Renkler

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' }),
)

Devre dışı

KullanılamazAçık ve kilitli

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Kullanılamaz', disabled: true }),
  checkbox({ label: 'Açık ve kilitli', checked: true, disabled: true }),
)

Uzun etiketler

Kutu, kendini bir paragrafa göre ortalamak yerine ilk satırla hizalı kalır.

Her derlemeden sonra bir Lighthouse denetimi çalıştır ve bir puan eşiğinin altına düştüğünde derlemeyi düşür.

checkbox({
  label: 'Her derlemeden sonra bir Lighthouse denetimi çalıştır ve bir puan eşiğinin altına düştüğünde derlemeyi düşür.',
  name: 'lighthouse',
  checked: true,
})

Gruplar

choiceGroup() veriden bir onay kutusu kümesi kurar, ortak bir başlık ve adla. Birkaçını işaretlemek için value olarak bir dizi geçirin.

Üret

sitemap.xmlrss.xmlPagefind dizini

Her biri derlemenin sonunda dist/ içine yazılır.

choiceGroup({
  legend: 'Üret',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Pagefind dizini' },
  ],
  help: 'Her biri derlemenin sonunda dist/ içine yazılır.',
})

Bir sırada

Kategoriler

performanceaccessibilityseo

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

Bir alanla

Tek bir onay kutusunun üstünde ayrıca bir etikete nadiren ihtiyacı olur. Bir grubun olduğunda field() ona bir metin alanıyla aynı etiket, yardım ve hata davranışını verir.

KoşullarKoşulları kabul ediyorum

Devam etmek için koşulları kabul etmeniz gerekir.

field({ label: 'Koşullar', error: 'Devam etmek için koşulları kabul etmeniz gerekir.' },
  checkbox({ label: 'Koşulları kabul ediyorum', name: 'terms', color: 'danger' }),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`label`	`Child`	—	Kutunun yanındaki metin. Çıplak bir denetim için atlayın.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	İşaretliyken renk.
`checked`	`boolean`	`false`	İşaretli başlayıp başlamayacağı.
`name`	`string`	—	Form alanı adı.
`value`	`string \| number`	—	İşaretliyken gönderilen değer.
`disabled`	`boolean`	`false`	Girdiyi devre dışı bırakır ve etiketi soluklaştırır.

Geri kalan her şey etikete değil <input> öğesine iner — yani required, onchange ve data-* beklediğiniz yere gider. Etiketin kendisini biçimlendirmek için class kullanın.

Veriden kurulan bir küme için Seçenek grubu sayfasındaki choiceGroup() işlevine bakın — her iki durumda da aynı seçenekleri alır, type: 'checkbox' ile değiştirilir.