Textarea Eingabe

Die textarea Komponente bietet ein mehrzeiliges Texteingabefeld für längere Inhalte. Die Komponente kann für Kommentare, Beschreibungen, Nachrichten oder beliebige freie Texteingaben verwendet werden.

Funktionen

  • Konfigurierbare Größe: Zeilen und Spalten lassen sich anpassen.

  • Platzhalter: Hinweistext, der angezeigt wird, wenn das Feld leer ist.

  • States: Disabled and required states.

HTML

Verwendung

Die Komponente wird über das textarea Tag eingebunden.

{% load insight_tags %} {% textarea config=input_config %} <!-- or --> {% textarea tag_id="message" name="message" rows=4 label="Write a message:" placeholder="Write something..." %}

Parameter

Laden…

config (TextareaConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.

 None False
name str

Wird für eine <form> benötigt, als Name des Request-Parameters.

 None False
label str

Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.

 None False
disabled bool

True, wenn das Feld deaktiviert sein soll.

 False False
disabled_reason str

Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.

 None False
required bool

True, wenn das Feld ausgefüllt werden muss.

 False False
placeholder str

Platzhaltertext, wird im Feld angezeigt, solange es nicht ausgewählt wurde.

 "" False
value str

Der Wert des Eingabefeldes.

 "" False
rows int

Bestimmt die Anzahl der Zeilen.

 3 False
cols int

Bestimmt die Anzahl an Buchstaben in einer Zeile.

 None False
TextareaConfig( name="message", label="Your Message", placeholder="Enter your message here...", rows=5, required=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das <label> und der dazugehörige <input> sind mit for / id miteinander verknüpft.

  • Pflichtfelder werden mit einem Sternchen und dem Attribut aria-label='Required' für Screenreader gekennzeichnet.

  • Die Attribute required und disabled sind für das Textarea-Element korrekt gesetzt.

  • Erläuternde Tooltips liefern über data-insight-tooltip zusätzliche Informationen.

  • Required fields add aria-required='true'; help_text and error are rendered as paragraphs linked via aria-describedby, and an error also sets aria-invalid='true' and aria-errormessage; the message itself is plain text, not a live region.

Offene Punkte

  • Das for Attribut des Labels verwendet name statt tag_id, was die Zuordnung bricht, wenn diese sich unterscheiden.

Verwandte Themen