CP Registry

Checkbox

Checkboxen für Formulare mit Custom-Styling. Unterstützt Einzelauswahl und Gruppen via CheckboxGroup. Barrierefrei mit aria-describedby für Fehler- und Hinweistexte.

Standard

Einzelne Checkboxen mit Label. Das checked-Attribut setzt den initialen Zustand.

Einzelne Checkboxen

<Checkbox label="AGB akzeptieren" name="terms" />
<Checkbox label="Newsletter abonnieren" name="newsletter" checked />

Zustände

Deaktivierte Checkboxen, Fehlermeldungen und Hinweistexte. Fehler werden per aria-describedby mit dem Feld verknüpft.

Disabled, Error, Hint

Sie können dies jederzeit ändern.

<Checkbox label="Deaktiviert" name="disabled-demo" disabled />
<Checkbox label="Deaktiviert + checked" name="disabled-checked" disabled checked />
<Checkbox label="AGB akzeptieren" name="terms-err" error="Sie müssen die AGB akzeptieren." />
<Checkbox label="Benachrichtigungen" name="notify" hint="Sie können dies jederzeit ändern." />

CheckboxGroup

Mehrere zusammengehörige Checkboxen werden in einer CheckboxGroup mit <fieldset> und <legend> gruppiert.

Gruppierte Checkboxen

Interessen 
<CheckboxGroup legend="Interessen">
  <Checkbox label="Sport" name="interests" value="sport" />
  <Checkbox label="Musik" name="interests" value="music" />
  <Checkbox label="Reisen" name="interests" value="travel" checked />
</CheckboxGroup>

Gruppe mit Fehler

Pflichtauswahl 
<CheckboxGroup legend="Pflichtauswahl" error="Bitte wählen Sie mindestens eine Option.">
  <Checkbox label="Option A" name="required-group" value="a" />
  <Checkbox label="Option B" name="required-group" value="b" />
</CheckboxGroup>

Installation

cp-components add checkbox