Radio

Überblick

mmm-radio ist aktuell eine sehr schlanke Radio-Komponente im frühen Ausbauzustand. Sie dient als Basis für exklusive Auswahloptionen.

Subkomponenten

• mmm-radio: einzelnes Radio für Standalone- oder Gruppen-Nutzung
• mmm-radio-group: Wrapper für mehrere Radiobuttons mit gemeinsamer Value-Verwaltung

Inputs mmm-radio

Input	Typ	Beschreibung
label	string | undefined	Sichtbares Label des Radios
errorMessage	string | undefined	Fehlermeldung im Error-State
ariaLabel	string | undefined	Alternativer Screenreader-Text
name	string | undefined	Name des nativen Radios im Standalone-Modus
value	unknown	Wert des Radio, relevant innerhalb einer Group
disabled	boolean	Deaktiviert das Radio
readonly	boolean	Deaktiviert die Bearbeitung des Radio
required	boolean	Markiert den nativen Input als erforderlich
error	boolean	Aktiviert den Error-State
checked	boolean	Checked-State im Standalone-Modus

Outputs mmm-radio

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-radio-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
readonly	boolean	Deaktiviert die Bearbeitung der gesamten 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
direction	'vertical' | 'horizontal'	Richtung, in der die Radios angeordnet werden sollen

Outputs mmm-radio-group

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

Forms und Verhalten

• mmm-radio implementiert ControlValueAccessor für boolesche Standalone-Nutzung.
• mmm-radio-group implementiert ControlValueAccessor für eine Gruppe mit mehreren Auswahlmöglichkeiten.
• Innerhalb einer Group wird der Checked-State einzelner Radiobuttons aus dem Group-Value abgeleitet.

SCSS-Variablen

Wichtige Variablen für mmm-radio:

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

Wichtige Variablen für mmm-radio-group:

• --mmm-radio-gap
• --mmm-radio-message-gap
• --mmm-radio-border-width
• --mmm-radio-border-color: var
• --mmm-radio-background
• --mmm-radio-error-background
• --mmm-radio-hover-background
• --mmm-radio-icon-color
• --mmm-radio-thumb-color
• --mmm-radio-label-color
• --mmm-radio-message-color
• --mmm-radio-focus-color
• --mmm-radio-active-color
• --mmm-radio-error-color
• --mmm-radio-disabled-background
• --mmm-radio-disabled-label

Hinweis

• 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.

Beispiel

    <mmm-radio label="Ein Radio"></mmm-radio>
    <mmm-radio label="Disabled Radio" [disabled]='true'></mmm-radio>
    <mmm-radio label="Radio mit Error" [error]='true' errorMessage='Diese Kombination kann nicht ausgewählt werden'></mmm-radio>
    <div style="width: 150px">
      <mmm-radio label="Ein Radio mit einem sehr langen Text, der umgebrochen werden muss"></mmm-radio>
    </div>


    <mmm-radio-group
      legend="Farbschema"
      headline="Wähle das gewünschte Farbschema"
      supportingText="Sie können diese Einstellung später ändern."
      name="colorscheme"
      [(ngModel)]="value"
      [error]="hasError"
      errorMessage="Bitte wähle mindestens einen Kanal aus."
    >
      <mmm-radio label="Hell" value="light"></mmm-radio>
      <mmm-radio label="Dunkel" value="dark"></mmm-radio>
      <mmm-radio label="Gerät" value="system"></mmm-radio>
    </mmm-radio-group>

    <mmm-radio-group
      legend="Farbschema (horizontal)"
      direction="horizontal"
      headline="Wähle das gewünschte Farbschema"
      supportingText="Sie können diese Einstellung später ändern."
      name="colorscheme_horizontal"
      [(ngModel)]="valueHorizontal"
      [error]="hasError"
      errorMessage="Bitte wähle mindestens einen Kanal aus."
    >
      <mmm-radio label="Hell" value="light"></mmm-radio>
      <mmm-radio label="Dunkel" value="dark"></mmm-radio>
      <mmm-radio label="Gerät" value="system"></mmm-radio>
    </mmm-radio-group>
        <mmm-radio-group
      legend="Farbschema (disabled)"
      direction="horizontal"
      headline="Wähle das gewünschte Farbschema"
      supportingText="Sie können diese Einstellung später ändern."
      name="colorscheme_horizontal"
      [(ngModel)]="valueHorizontal"
      disabled="true"
    >
      <mmm-radio label="Hell" value="light"></mmm-radio>
      <mmm-radio label="Dunkel" value="dark"></mmm-radio>
      <mmm-radio label="Gerät" value="system"></mmm-radio>
    </mmm-radio-group>

    <mmm-radio-group
      legend="Farbschema (readonly)"
      direction="horizontal"
      headline="Wähle das gewünschte Farbschema"
      supportingText="Sie können diese Einstellung später ändern."
      name="colorscheme_horizontal"
      [(ngModel)]="valueHorizontal"
      readonly="true"
    >
      <mmm-radio label="Hell" value="light"></mmm-radio>
      <mmm-radio label="Dunkel" value="dark"></mmm-radio>
      <mmm-radio label="Gerät" value="system"></mmm-radio>
    </mmm-radio-group>

Ein Radio Disabled Radio Readonly Radio Radio mit Error warnschild_24Diese Kombination kann nicht ausgewählt werden

Ein Radio mit einem sehr langen Text, der umgebrochen werden muss

Farbschema

Wähle das gewünschte Farbschema

Hell Dunkel Gerät

Sie können diese Einstellung später ändern.

Farbschema (horizontal)

Wähle das gewünschte Farbschema

Hell Dunkel Gerät

Sie können diese Einstellung später ändern.

Farbschema (disabled)

Wähle das gewünschte Farbschema

Hell Dunkel Gerät

Sie können diese Einstellung später ändern.

Farbschema (readonly)

Wähle das gewünschte Farbschema

Hell Dunkel Gerät

Sie können diese Einstellung später ändern.