Version: latest

Universell einsetzbar

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

CheckboxGroup

CheckboxGroup manages a set of related Checkbox inputs as a multi-select group. Handles selection state, accessible grouping, and error display for the group as a whole.

Übersicht

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"
;<CheckboxGroup
  legend="Interessen"
  options={[
    { value: "design", title: "Design" },
    { value: "dev", title: "Entwicklung" },
    { value: "marketing", title: "Marketing" },
  ]}
  values={selected}
  onChange={setSelected}
/>

Live PreviewOpen in Storybook ↗

Import

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"

CSS:

import "@prokodo/ui/checkbox-group.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`legend`	`ReactNode`	—	—	Fieldset-Legendentext.
`hideLegend`	`boolean`	`false`	—	Legende visuell ausblenden (bleibt barrierefrei).
`legendProps`	`object`	—	—	Props an das Legendenelement weitergeben.
`ariaLabel`	`string`	—	—	Barrierefreie Bezeichnung des Fieldsets.
`options`	`CheckboxGroupOption[]`	—	✅	Array von Checkbox-Einträgen.
`values`	`T[]`	—	—	Gesteuerte ausgewählte Werte.
`defaultValues`	`T[]`	—	—	Unkontrollierte Ausgangswerte.
`hiddenInputName`	`string`	—	—	Versteckter Input-Name für die Formular-Übermittlung.
`disabled`	`boolean`	`false`	—	Alle Checkboxen deaktivieren.
`required`	`boolean`	`false`	—	Feld als Pflichtfeld markieren.
`layout`	`"stack" \| "grid"`	`"stack"`	—	Layout der Checkbox-Einträge.
`variant`	`"plain" \| "card"`	`"plain"`	—	Visuelle Variante für alle Checkboxen.
`color`	`Variants`	—	—	Farbakzent-Variante.
`onChange`	`(values: T[]) => void`	—	—	Wird bei Auswahlwechsel aufgerufen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/checkbox-group/CheckboxGroup.model.ts für den vollständigen CheckboxGroupProps-Typ.

Design-Tokens

CheckboxGroup erbt dieselben Tokens wie Checkbox. Vollständige Liste: Checkbox — Design-Tokens.

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { CheckboxGroup } from "@prokodo/ui/checkbox-group"

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: 1 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

👉 CheckboxGroup in Storybook öffnen

Quellcode

src/components/checkbox-group/CheckboxGroup.model.ts