Input Field Eingabe

Die input_field Komponente stellt Formular-Eingabefelder mit integrierten Validierungsstilen bereit. Sie unterstützt verschiedene HTML-Eingabetypen und lässt sich in Django-Formulare integrieren.

WCAG AA

Funktionen

Eingabetypen: Text, E-Mail, Passwort, Zahl, Telefonnummer, URL, Datum, Uhrzeit, Farbe, Datei und mehr.
Validierungsbeschränkungen: Min-/Max-Werte, Attribute mit Min-/Max-Länge.
Platzhalter: Hinweistext, der angezeigt wird, wenn das Feld leer ist.
States: Disabled and required states.

HTML

RTL

Verwendung

Die Komponente wird über das input_field Tag eingebunden.

{% load insight_tags %} {% input_field config=input_config %}  {% input_field tag_id="expiration-date" name="expiration_date" input_type="date" value="expiration_date" label="Choose expiration date:" %}

Parameter

config (InputFieldConfig 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
input_type	HtmlInputType HtmlInputType Native HTML input type attribute values. `text` `password` `email` `number` `tel` `url` `date` `time` `datetime-local` `month` `week` `color` `file` `hidden` `checkbox` `radio` Typen Dokumentation →	Der Typ des Input-Feldes, bspw.: 'text', 'password', 'date', etc..	text	False
placeholder	str	Platzhaltertext, wird im Feld angezeigt, solange es nicht ausgewählt wurde.	""	False
value	str \| int \| float	Der Wert des Eingabefeldes.	None	False
minimum	int	Kleinster numerischer Wert (für input_type='number').	None	False
maximum	int	Größter numerischer Wert (für input_type='number').	None	False
min_length	int	Minimale Anzahl an Zeichen in einem Textfeld.	None	False
max_length	int	Maximale Anzahl an Zeichen in einem Textfeld.	None	False
checked	bool	True, wenn input_type='checkbox' und die Checkbox ausgewählt sein soll.	False	False

InputFieldConfig( name="email", input_type="email", label="E-Mail Address", placeholder="[email protected]", 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 Input-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.