Pole wyboru

checkbox() renderuje <label> opakowującą prawdziwy <input type="checkbox"> i widoczny kwadracik. Input jest ukryty wizualnie, ale wciąż tam jest, więc da się go sfokusować, wysyła się z formularzem, a cała etykieta jest celem kliknięcia — ptaszek rysowany jest z własnego stanu :checked inputa, bez udziału jakiegokolwiek skryptu.

Podstawowe pole wyboru

Wysyłaj mi aktualizacjeZaznaczone

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Wysyłaj mi aktualizacje', name: 'updates' }),
  checkbox({ label: 'Zaznaczone', name: 'checked', checked: true }),
)

Kolory

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

Wyłączone

NiedostępneZaznaczone i zablokowane

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Niedostępne', disabled: true }),
  checkbox({ label: 'Zaznaczone i zablokowane', checked: true, disabled: true }),
)

Długie etykiety

Kwadracik zostaje wyrównany do pierwszego wiersza, zamiast centrować się względem całego akapitu.

Uruchom audyt Lighthouse po każdym buildzie i przerwij build, gdy wynik spadnie poniżej swojego progu.

checkbox({
  label: 'Uruchom audyt Lighthouse po każdym buildzie i przerwij build, gdy wynik spadnie poniżej swojego progu.',
  name: 'lighthouse',
  checked: true,
})

Grupy

choiceGroup() buduje z danych zestaw pól wyboru, ze wspólną legendą i nazwą. Podaj tablicę jako value, żeby zaznaczyć kilka.

Generuj

sitemap.xmlrss.xmlIndeks Pagefind

Każdy zapisuje się do dist/ na końcu buildu.

choiceGroup({
  legend: 'Generuj',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Indeks Pagefind' },
  ],
  help: 'Każdy zapisuje się do dist/ na końcu buildu.',
})

W rzędzie

Kategorie

performanceaccessibilityseo

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

Z polem

Pojedyncze pole wyboru rzadko potrzebuje jeszcze etykiety nad sobą. Gdy potrzebuje jej grupa, field() daje jej takie samo potraktowanie etykiety, pomocy i błędu jak polu tekstowemu.

RegulaminAkceptuję regulamin

Musisz zaakceptować regulamin, żeby przejść dalej.

field({ label: 'Regulamin', error: 'Musisz zaakceptować regulamin, żeby przejść dalej.' },
  checkbox({ label: 'Akceptuję regulamin', name: 'terms', color: 'danger' }),
)

Propsy

Prop	Typ	Domyślnie	Opis
`label`	`Child`	—	Tekst obok kwadracika. Pomiń dla gołej kontrolki.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Kolor, gdy zaznaczone.
`checked`	`boolean`	`false`	Czy startuje zaznaczone.
`name`	`string`	—	Nazwa pola formularza.
`value`	`string \| number`	—	Wartość wysyłana, gdy zaznaczone.
`disabled`	`boolean`	`false`	Wyłącza input i przygasza etykietę.

Cała reszta ląduje na <input>, a nie na etykiecie — więc required, onchange i data-* trafiają tam, gdzie się spodziewasz. Do ostylowania samej etykiety użyj class.

Dla zestawu budowanego z danych zobacz choiceGroup() na stronie Grupa opcji — przyjmuje te same opcje w obu przypadkach, przełączane przez type: 'checkbox'.