Textarea

Überblick

mmm-textarea ist das generische Eingabefeld des Designsystems. Es unterstützt Form-Control-Anbindung, Fehlermeldungen und Resizing.

Inputs

Input	Typ	Beschreibung
disabled	boolean	Deaktiviert das Feld
hidden	boolean	Versteckt das Feld
readonly	boolean	Deaktiviert die Bearbeitung des Feldes
value	string	Externer Wert
label	string	Feldlabel
error	boolean	Fehlerstatus
compact	boolean	Kompakter Modus
errorMessage	string	Fehlermeldung
supportingText	string	Hilfetext
placeholder	string	Platzhalter im Hintergrund bei fokussiertem Textfeld
minLength	number	Minimale Zahl bei type="number"
maxLength	number	Maximale Zahl bei type="number"
rows	number	Anzahl der initial dargestellten Zeilen
maxRows	number	Maximale Zeilenanzahl
resize	string	'vertical' | 'horizontal' | 'both' | 'none'
autosize	boolean	Lässt das Feld zwische row und maxRows mit dem Inhalt wachsen
showCounter	boolean	Bestimmt ob der Charactercount dargestellt wird
submitOnModifierEnter	boolean	Ermöglicht es via Ctrl/Cmd+Enter ein umschließendes Formular zu verschicken
selectOnTabFocus	boolean	Ob bei Fokus via tab key der gesamte Inhalt selektiert wird

Outputs

Output	Typ	Beschreibung
input	EventEmitter<CustomEvent<{ value: string | number }>>	Native-angelehntes Input-Event
change	EventEmitter<CustomEvent<{ value: string | number }>>	Native-angelehntes Change-Event

Die Komponente implementiert außerdem ControlValueAccessor.

SCSS-Variablen

Wichtige Variablen:

• --mmm-textarea-bg

• --mmm-textarea-hover-bg

• --mmm-textarea-fg

• --mmm-textarea-border

• --mmm-textarea-focus

• --mmm-textarea-error

• --mmm-textarea-muted

• --mmm-textarea-border-radius

• --mmm-textarea-min-height

• --mmm-textarea-min-height-compact

• --mmm-textarea-padding-inline

• --mmm-textarea-label-offset-inline

• --mmm-textarea-label-offset-block

• --mmm-textarea-label-padding-inline

• --mmm-textarea-label-border-radius

• --mmm-textarea-label-font-size

• --mmm-textarea-counter-clearance

• --mmm-textarea-native-padding

• --mmm-textarea-footer-gap

• --mmm-textarea-footer-padding

• --mmm-textarea-footer-min-height

• --mmm-textarea-messages-font-size

Beispiel

<mmm-textarea
  label="Anmerkung"
  placeholder="Bitte teilen Sie uns ihre Anmerkungen mit"
></mmm-textarea>

<mmm-textarea
  label="Beschreibung"
  supportingText="Eine möglicht detaillierte Beschreibung"
  placeholder="Placeholder"
></mmm-textarea>

Anmerkung

Beschreibung

Eine möglicht detaillierte Beschreibung