InputEmail

Der Input-Typ E-Mail erzeugt ein Eingabefeld für E-Mails.

Konstruktion

Code

<kol-input-email _id="meine_email" _name="meine_email" _icon="codicon codicon-mail"> E-Mail-Adresse </kol-input-email>

Beispiel

E-Mail-Adresse

Verwendung

Setzen Sie die InputEmail-Komponente auf Formularen ein, wenn dort die Eingabe einer oder mehrerer E-Mail-Adressen erforderlich ist.

Standardmäßig ist die Komponente für die Erfassung einer einzelnen E-Mail-Adresse vorgesehen. Setzen Sie das Attribut _multiple, um mehrere E-Mail-Adressen zu erfassen. Trennen Sie die einzelnen E-Mail-Adressen mit einem Komma (,) voneinander.

Best practices

Achten sie darauf id und name korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.

Barrierefreiheit

Eine Validierung der erfassten E-Mail-Adressen innerhalb der Komponente erfolgt nicht. Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut _error mit der entsprechenden Fehlermeldung, diese wird dann via kol-alert unterhalb angezeigt.

Tastatursteuerung

Taste	Funktion
`Tab`	Fokussiert das Eingabefeld.

Links und Referenzen

Properties

Property	Attribute	Description	Type	Default
`_accessKey`	`_access-key`	Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.	`string` \| `undefined`	`undefined`
`_alert`	`_alert`	Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.	`boolean` \| `undefined`	`true`
`_autoComplete`	`_auto-complete`	Gibt an, ob das Eingabefeld autovervollständigt werden kann.	`"off"` \| `"on"` \| `undefined`	`undefined`
`_disabled`	`_disabled`	Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.	`boolean` \| `undefined`	`undefined`
`_error`	`_error`	Gibt den Text für eine Fehlermeldung an.	`string` \| `undefined`	`undefined`
`_hideLabel`	`_hide-label`	Versteckt das sichtbare Label des Elements.	`boolean` \| `undefined`	`undefined`
`_hint`	`_hint`	Gibt den Hinweistext an.	`string` \| `undefined`	`''`
`_icon`	`_icon`	Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.	`string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }`	`undefined`
`_id`	`_id`	Gibt die technische ID des Eingabefeldes an.	`string` \| `undefined`	`undefined`
`_list`	`_list`	Gibt die Liste der Vorschlagswörter an.	`string` \| `string[]` \| `undefined`	`undefined`
`_maxLength`	`_max-length`	Gibt an, wie viele Zeichen man maximal eingeben kann.	`number` \| `undefined`	`undefined`
`_multiple`	`_multiple`	Gibt an, ob mehrere Werte eingegeben werden können.	`boolean` \| `undefined`	`undefined`
`_name`	`_name`	Gibt den technischen Namen des Eingabefeldes an.	`string` \| `undefined`	`undefined`
`_on`	--	Gibt die EventCallback-Funktionen für das Input-Event an.	`InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`	`undefined`
`_pattern`	`_pattern`	Gibt ein Prüfpattern für das Eingabefeld an.	`string` \| `undefined`	`undefined`
`_placeholder`	`_placeholder`	Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.	`string` \| `undefined`	`undefined`
`_readOnly`	`_read-only`	Setzt das Eingabefeld in den schreibgeschützten Modus.	`boolean` \| `undefined`	`undefined`
`_required`	`_required`	Macht das Eingabeelement zu einem Pflichtfeld.	`boolean` \| `undefined`	`undefined`
`_size`	`_size`	Setzt die Breite des Eingabefeldes in Buchstabenbreiten.	`number` \| `undefined`	`undefined`
`_smartButton`	--	Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).	`undefined` \| `{ _label: string; } & { _ariaControls?: string` \| `undefined; _ariaLabel?: string` \| `undefined; _icon?: Stringified<KoliBriIconProp>` \| `undefined; _iconAlign?: Alignment` \| `undefined; _iconOnly?: boolean` \| `undefined; _role?: AlternativButtonLinkRole` \| `undefined; _tabIndex?: number` \| `undefined; _tooltipAlign?: Alignment` \| `undefined; _ariaCurrent?: AriaCurrent` \| `undefined; _ariaExpanded?: boolean` \| `undefined; _ariaSelected?: boolean` \| `undefined; _disabled?: boolean` \| `undefined; _accessKey?: string` \| `undefined; _id?: string` \| `undefined; _on?: KoliBriButtonCallbacks<unknown>` \| `undefined; _type?: KoliBriButtonType` \| `undefined; _value?: unknown; _variant?: KoliBriButtonVariant` \| `undefined; _customClass?: string` \| `undefined; }`	`undefined`
`_tabIndex`	`_tab-index`	Gibt an, welchen Tab-Index dieses Input hat.	`number` \| `undefined`	`undefined`
`_touched`	`_touched`	Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.	`boolean` \| `undefined`	`false`
`_value`	`_value`	Gibt den Wert des Eingabefeldes an.	`string` \| `undefined`	`undefined`

Slots

Slot	Description
	Die Beschriftung des Eingabefeldes.

InputEmail

Konstruktion

Code

Beispiel

Verwendung

Best practices

Barrierefreiheit

Tastatursteuerung

Links und Referenzen

Properties

Slots

Dependencies

Depends on

Graph

Live-Editor

Beispiele

Konstruktion​

Code​

Beispiel​

Verwendung​

Best practices​

Barrierefreiheit​

Tastatursteuerung​

Links und Referenzen​

Properties​

Slots​

Dependencies​

Depends on​

Graph​

Live-Editor​

Beispiele​

Konstruktion

Code

Beispiel

Verwendung

Best practices

Barrierefreiheit

Tastatursteuerung

Links und Referenzen

Properties

Slots

Dependencies

Depends on

Graph

Live-Editor

Beispiele