CP Registry

CheckboxCard

Checkboxen als klickbare Karten mit dem CSS peer-Selektor Pattern. Ideal für Feature-Auswahl, Konfigurationsoptionen oder Planvergleiche.

Standard

Drei Karten in einer Gruppe. Klick auf die gesamte Karte togglet die Checkbox.

Basis-Gruppe

Features auswählen 
<CheckboxCardGroup legend="Features auswählen">
  <CheckboxCard name="features" value="seo" label="SEO" description="Suchmaschinenoptimierung für bessere Sichtbarkeit" />
  <CheckboxCard name="features" value="a11y" label="Barrierefreiheit" description="WCAG 2.2 konforme Umsetzung" />
  <CheckboxCard name="features" value="perf" label="Performance" description="Core Web Vitals optimiert" />
</CheckboxCardGroup>

Mit Icons

Karten mit Icon für schnellere visuelle Zuordnung.

Icons

Benachrichtigungen 
<CheckboxCardGroup legend="Benachrichtigungen">
  <CheckboxCard name="notify" value="email" label="E-Mail" description="Taeglich per E-Mail" icon="&#9993;" />
  <CheckboxCard name="notify" value="sms" label="SMS" description="Sofort per SMS" icon="&#128172;" />
  <CheckboxCard name="notify" value="push" label="Push" description="Browser-Benachrichtigung" icon="&#128276;" />
</CheckboxCardGroup>

Vorausgewählt

Karten können mit checked vorausgewählt werden.

Pre-checked

Sprachen 
<CheckboxCardGroup legend="Sprachen" columns={4}>
  <CheckboxCard name="lang" value="de" label="Deutsch" checked />
  <CheckboxCard name="lang" value="en" label="Englisch" checked />
  <CheckboxCard name="lang" value="fr" label="Französisch" />
  <CheckboxCard name="lang" value="es" label="Spanisch" />
</CheckboxCardGroup>

Deaktiviert

Einzelne Karten oder die gesamte Auswahl kann deaktiviert werden.

Disabled

Add-ons 
<CheckboxCardGroup legend="Add-ons">
  <CheckboxCard name="addon" value="support" label="Premium Support" description="24/7 Erreichbarkeit" />
  <CheckboxCard name="addon" value="backup" label="Backup" description="Taegliche Sicherung" disabled />
  <CheckboxCard name="addon" value="cdn" label="CDN" description="Globale Auslieferung" disabled checked />
</CheckboxCardGroup>

Fehlerzustand

Validierungsfehler werden unterhalb der Gruppe mit role="alert" angezeigt.

Error State

Pflichtauswahl 
<CheckboxCardGroup legend="Pflichtauswahl" error="Bitte wählen Sie mindestens eine Option.">
  <CheckboxCard name="required" value="a" label="Option A" description="Erste Auswahlmöglichkeit" />
  <CheckboxCard name="required" value="b" label="Option B" description="Zweite Auswahlmöglichkeit" />
  <CheckboxCard name="required" value="c" label="Option C" description="Dritte Auswahlmöglichkeit" />
</CheckboxCardGroup>

Installation

cp-components add checkboxcard