Universell einsetzbar

Checkbox funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/checkbox) — die Library erkennt die Umgebung automatisch.

Checkbox

Checkbox rendert ein barrierefreies <input type="checkbox"> mit zugehörigem Label, optionalem Hilfetext und Fehlerfeedback. Funktioniert in kontrollierten und unkontrollierten Modi.

---

Übersicht

import { Checkbox } from "@prokodo/ui/checkbox"
;<Checkbox
  value="terms"
  title="Ich akzeptiere die Allgemeinen Geschäftsbedingungen"
  checked={accepted}
  onChange={checked => setAccepted(checked)}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Checkbox } from "@prokodo/ui/checkbox"

CSS:

import "@prokodo/ui/checkbox.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
value	T (generisch)	—	✅	Wert dieser Checkbox.
title	ReactNode	—	—	Label/Titel neben der Checkbox.
description	string	—	—	Sekundärer Beschreibungstext.
icon	string	—	—	Icon-Name in der Karten-Variante.
iconLabel	string	—	—	Barrierefreie Bezeichnung des Icons.
checked	boolean	—	—	Gesteuerter Aktivierungszustand.
defaultChecked	boolean	—	—	Unkontrollierter Ausgangszustand.
disabled	boolean	false	—	Checkbox deaktivieren.
required	boolean	false	—	Feld als Pflichtfeld markieren.
showRequiredMark	boolean	false	—	Pflicht-Sternchen am Label anzeigen.
variant	"plain" | "card"	"plain"	—	Visuelle Variante.
color	Variants	—	—	Farbakzent-Variante.
onChange	(checked: boolean, value: T) => void	—	—	Wird bei Aktivierungszustandsänderung aufgerufen.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/checkbox/Checkbox.model.ts für den vollständigen CheckboxProps-Typ.

---

Design-Tokens

Passe Checkbox über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
--pk-checkbox-size	1.125rem	Größe der Checkbox
--pk-checkbox-control-radius	6px	Eckenradius der Checkbox
--pk-checkbox-control-border	var(--pk-palette-grey-200)	Rahmen (nicht angehakt)
--pk-checkbox-gradient-from	var(--pk-color-brand)	Verlauf Start (angehakt)
--pk-checkbox-gradient-to	var(--pk-color-accent)	Verlauf Ende (angehakt)
--pk-checkbox-fg	var(--pk-color-fg)	Label-Textfarbe
--pk-checkbox-error-fg	var(--pk-color-error)	Fehler-Textfarbe

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Checkbox } from "@prokodo/ui/checkbox"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.4.1	Verwendung von Farbe (A)	🔍 Manuell prüfen	Farbe darf nicht das einzige Mittel zur Informationsvermittlung sein (z. B. Fehlerhinweise, Pflichtfeldmarkierungen).
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
3.3.2	Bezeichnungen oder Anweisungen (A)	✅ Erfüllt	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 5 Testdatei(en) · 3 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Checkbox in Storybook öffnen

---

Quellcode

src/components/checkbox/Checkbox.model.ts