Checkbox

Überblick

mmm-checkbox bildet einzelne Auswahloptionen mit Label, Supporting Text, Error-State und Indeterminate-State ab. Für Mehrfachauswahlen steht zusätzlich mmm-checkbox-group als gruppierender Wrapper mit gemeinsamer Beschriftung, Fehlermeldung und CVA-Anbindung zur Verfügung.

Subkomponenten

• mmm-checkbox: einzelne Checkbox für Standalone- oder Gruppen-Nutzung
• mmm-checkbox-group: Wrapper für mehrere Checkboxen mit gemeinsamer Value-Verwaltung

Inputs mmm-checkbox

Input	Typ	Beschreibung
label	string | undefined	Sichtbares Label der Checkbox
supportingText	string | undefined	Zusätzlicher Hilfetext unter dem Label
errorMessage	string | undefined	Fehlermeldung im Error-State
ariaLabel	string | undefined	Alternativer Screenreader-Text
name	string | undefined	Name des nativen Inputs im Standalone-Modus
value	unknown	Wert der Checkbox, relevant innerhalb einer Group
disabled	boolean	Deaktiviert die Checkbox
required	boolean	Markiert den nativen Input als erforderlich
error	boolean	Aktiviert den Error-State
indeterminate	boolean	Zeigt den Indeterminate-State an
checked	boolean	Checked-State im Standalone-Modus

Outputs mmm-checkbox

Output	Typ	Beschreibung
checkedChange	EventEmitter<boolean>	Emittiert den neuen Checked-State im Standalone-Modus
change	EventEmitter<CustomEvent<{ checked: boolean; value: unknown }>>	Emittiert den geänderten Zustand inklusive Value

Inputs mmm-checkbox-group

Input	Typ	Beschreibung
legend	string | undefined	Beschriftung des fieldset
headline	string | undefined	Zusätzliche Überschrift innerhalb der Gruppe
supportingText	string | undefined	Gruppentext unterhalb der Optionen
errorMessage	string | undefined	Fehlermeldung der Gruppe
disabled	boolean	Deaktiviert die gesamte Gruppe
error	boolean	Aktiviert den Error-State der Gruppe
required	boolean	Kennzeichnet die Gruppe als erforderlich
name	string | undefined	Name, der an enthaltene Checkboxen weitergegeben wird

Outputs mmm-checkbox-group

Output	Typ	Beschreibung
valueChange	EventEmitter<unknown[]>	Emittiert die aktuelle Auswahl als Array
change	EventEmitter<CustomEvent<{ value: unknown[] }>>	Emittiert die aktuelle Auswahl als CustomEvent

Forms und Verhalten

• mmm-checkbox implementiert ControlValueAccessor für boolesche Standalone-Nutzung.
• mmm-checkbox-group implementiert ControlValueAccessor für Mehrfachauswahl-Arrays.
• Innerhalb einer Group wird der Checked-State einzelner Checkboxen aus dem Group-Value abgeleitet.

SCSS-Variablen

Wichtige Variablen für mmm-checkbox:

• --mmm-checkbox-size
• --mmm-checkbox-gap
• --mmm-checkbox-border-color
• --mmm-checkbox-background
• --mmm-checkbox-active-color
• --mmm-checkbox-error-color
• --mmm-checkbox-disabled-border
• --mmm-checkbox-disabled-background

Wichtige Variablen für mmm-checkbox-group:

• --mmm-checkbox-group-gap
• --mmm-checkbox-group-items-gap
• --mmm-checkbox-group-legend-gap
• --mmm-checkbox-group-headline-gap
• --mmm-checkbox-group-message-gap
• --mmm-checkbox-group-error-color

Hinweise

• checked ist nur im Standalone-Modus relevant. In einer Group wird der Zustand über value und den Group-Value gesteuert.
• Bei error=true wird errorMessage priorisiert, ansonsten wird supportingText angezeigt.
• Für Gruppen sollte legend gesetzt werden, damit die Auswahl semantisch korrekt beschrieben ist.

Beispiele

<mmm-checkbox
  label="Newsletter abonnieren"
  supportingText="Du kannst dich jederzeit wieder abmelden."
></mmm-checkbox>

<mmm-checkbox-group
  legend="Benachrichtigungen"
  name="notifications"
>
  <mmm-checkbox value="mail" label="E-Mail"></mmm-checkbox>
  <mmm-checkbox value="push" label="Push"></mmm-checkbox>
</mmm-checkbox-group>

Newsletter abonnieren Du kannst dich jederzeit wieder abmelden.haken_16 AGB akzeptieren minuszeichen_12 Teilweise ausgewählt Pflichtfeld warnschild_24Bitte triff eine Auswahl. Nicht verfügbar Diese Option ist aktuell deaktiviert.

Benachrichtigungskanäle

Wähle die gewünschten Kanäle

E-Mail Push SMS

Mehrfachauswahl ist möglich.