Checkbox

checkbox() rendert ein <label>, das ein echtes <input type="checkbox"> und das sichtbare Kästchen umschließt. Das Input ist visuell versteckt, aber weiterhin da: es ist fokussierbar, es wird abgeschickt, und das ganze Label ist Klickfläche — das Häkchen wird aus dem eigenen :checked-Zustand des Inputs gezeichnet, ganz ohne Skript.

Einfache Checkbox

Updates per E-Mail schickenAngehakt

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Updates per E-Mail schicken', name: 'updates' }),
  checkbox({ label: 'Angehakt', name: 'checked', checked: true }),
)

Farben

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

Deaktiviert

Nicht verfügbarAn und gesperrt

stack({ direction: 'row', gap: 'lg' },
  checkbox({ label: 'Nicht verfügbar', disabled: true }),
  checkbox({ label: 'An und gesperrt', checked: true, disabled: true }),
)

Lange Labels

Das Kästchen bleibt an der ersten Zeile ausgerichtet, statt sich mittig zu einem Absatz zu setzen.

Nach jedem Build ein Lighthouse-Audit laufen lassen und den Build scheitern lassen, wenn ein Wert unter seine Schwelle fällt.

checkbox({
  label: 'Nach jedem Build ein Lighthouse-Audit laufen lassen und den Build scheitern lassen, wenn ein Wert unter seine Schwelle fällt.',
  name: 'lighthouse',
  checked: true,
})

Gruppen

choiceGroup() baut aus Daten eine Reihe von Checkboxen, mit gemeinsamer Legende und gemeinsamem name. Übergib ein Array als value, um mehrere anzuhaken.

Erzeugen

sitemap.xmlrss.xmlPagefind-Index

Jedes davon wird am Ende des Builds nach dist/ geschrieben.

choiceGroup({
  legend: 'Erzeugen',
  name: 'generate',
  type: 'checkbox',
  value: ['sitemap', 'rss'],
  options: [
    { value: 'sitemap', label: 'sitemap.xml' },
    { value: 'rss', label: 'rss.xml' },
    { value: 'pagefind', label: 'Pagefind-Index' },
  ],
  help: 'Jedes davon wird am Ende des Builds nach dist/ geschrieben.',
})

In einer Reihe

Kategorien

performanceaccessibilityseo

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

Mit einem Field

Eine einzelne Checkbox braucht selten zusätzlich ein Label darüber. Wenn eine Gruppe es doch braucht, gibt ihr field() dieselbe Behandlung von Label, Hilfe und Fehler wie einem Textfeld.

BedingungenIch akzeptiere die Bedingungen

Du musst die Bedingungen akzeptieren, um fortzufahren.

field({ label: 'Bedingungen', error: 'Du musst die Bedingungen akzeptieren, um fortzufahren.' },
  checkbox({ label: 'Ich akzeptiere die Bedingungen', name: 'terms', color: 'danger' }),
)

Props

Prop	Typ	Standard	Beschreibung
`label`	`Child`	—	Text neben dem Kästchen. Weglassen für ein nacktes Steuerelement.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Farbe im angehakten Zustand.
`checked`	`boolean`	`false`	Ob sie angehakt startet.
`name`	`string`	—	Name des Formularfelds.
`value`	`string \| number`	—	Wert, der im angehakten Zustand gesendet wird.
`disabled`	`boolean`	`false`	Deaktiviert das Input und dämpft das Label.

Alles Weitere landet auf dem <input>, nicht auf dem Label — required, onchange und data-* gehen also dorthin, wo man sie erwartet. Nutze class, um das Label selbst zu gestalten.

Für eine aus Daten gebaute Reihe siehe choiceGroup() auf der Seite Radio-Gruppe — es nimmt in beiden Fällen dieselben Optionen, umgeschaltet über type: 'checkbox'.