InputEmail
Der Input-Typ E-Mail erzeugt ein Eingabefeld für E-Mails.
Konstruktion
Code
<kol-input-email _label="E-Mail-Adresse" _icon='{"right": "codicon codicon-mail"}'></kol-input-email>
Beispiel
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
idundnamekorrekt 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 | Defines which key combination can be used to trigger or focus the interactive element of the component. | string | undefined | undefined |
_alert | _alert | Defines whether the screen-readers should read out the notification. | boolean | undefined | true |
_autoComplete | _auto-complete | Defines whether the input can be auto-completed. | "off" | "on" | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | undefined |
_error | _error | Defines the error message text. | string | undefined | undefined |
_hasCounter | _has-counter | Shows the character count on the lower border of the input. | boolean | undefined | undefined |
_hideLabel | _hide-label | Hides the label. | boolean | undefined | undefined |
_hint | _hint | Defines the hint text. | string | undefined | '' |
_icon | _icon | Defines the icon classnames (e.g. _icon="fa-solid fa-user"). | string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; } | undefined |
_id | _id | Defines the internal ID of the primary component element. | string | undefined | undefined |
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | boolean | string | undefined | undefined |
_list | _list | [DEPRECATED] Use _suggestions. Deprecated: Gibt die Liste der Vorschlagswörter an. | string | string[] | undefined | undefined |
_maxLength | _max-length | Defines the maximum number of input characters. | number | undefined | undefined |
_multiple | _multiple | Makes the input accept multiple inputs. | boolean | undefined | undefined |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefined | undefined |
_pattern | _pattern | Defines a validation pattern for the input field. | string | undefined | undefined |
_placeholder | _placeholder | Defines the placeholder for input field. To be shown when there's no value. | string | undefined | undefined |
_readOnly | _read-only | Makes the input element read only. | boolean | undefined | undefined |
_required | _required | Makes the input element required. | boolean | undefined | undefined |
_size | _size | Setzt die Breite des Eingabefeldes in Buchstabenbreiten. | number | undefined | undefined |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: LabelWithExpertSlotPropType; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _accessKey?: string | undefined; _iconAlign?: AlignPropType | undefined; _iconOnly?: boolean | undefined; _role?: AlternativeButtonLinkRolePropType | undefined; _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrentPropType | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: ButtonTypePropType | undefined; _variant?: ButtonVariantPropType | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icon?: IconPropType | undefined; _id?: string | undefined; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; } | undefined |
_suggestions | _suggestions | Suggestions to provide for the input. | W3CInputValue[] | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_touched | _touched | Shows if the input was touched by a user. | boolean | undefined | false |
_value | _value | Defines the value of the input. | string | undefined | undefined |
Slots
| Slot | Description |
|---|---|
| Die Beschriftung des Eingabefeldes. |
Dependencies
Depends on
- kol-input
- kol-tooltip-wc