Skip to main content

InputText

Der Input-Typ Text erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.

Konstruktion

Code

<kol-input-text
_type="text"
_label="Texteingabe"
_icons='{"left": "codicon codicon-arrow-left", "right": {"icon": "codicon codicon-arrow-right", "style": {"font-size": "200%"}}}'
></kol-input-text>
<kol-input-text _type="text" _label="Deaktiviert" _disabled></kol-input-text>
<kol-input-text _type="text" _label="Schreibgeschützt" _read-only></kol-input-text>
<kol-input-text
_type="text"
_label="Mit Button"
_smart-button='{"_icons": "codicon codicon-chrome-close", "_hideLabel": true, "_label": "Löschen"}'
></kol-input-text>

Beispiel

Verwendung

Best practices

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

Barrierefreiheit

Tastatursteuerung

TasteFunktion
TabFokussiert das Eingabefeld.
ESCLöscht den Inhalt (nur Typ = Search).

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_alert_alertDefines whether the screen-readers should read out the notification.boolean | undefinedtrue
_autoComplete_auto-completeDefines whether the input can be auto-completed."off" | "on" | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_error_errorDefines the error message text.string | undefinedundefined
_hasCounter_has-counterShows the character count on the lower border of the input.boolean | undefinedfalse
_hideError_hide-errorHides the error message but leaves it in the DOM for the input's aria-describedby.boolean | undefinedfalse
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_hint_hintDefines the hint text.string | undefined''
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.stringundefined
_maxLength_max-lengthDefines the maximum number of input characters.number | undefinedundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_pattern_patternDefines a validation pattern for the input field.string | undefinedundefined
_placeholder_placeholderDefines the placeholder for input field. To be shown when there's no value.string | undefinedundefined
_readOnly_read-onlyMakes the input element read only.boolean | undefinedfalse
_required_requiredMakes the input element required.boolean | undefinedfalse
_smartButton_smart-buttonAllows to add a button with an arbitrary action within the element (_hide-label only).string | undefined | { _label: string; } & { _tabIndex?: number | undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType | undefined; _ariaControls?: string | undefined; _ariaExpanded?: boolean | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom" | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _name?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _accessKey?: string | undefined; }undefined
_suggestions_suggestionsSuggestions to provide for the input.W3CInputValue[] | string | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_touched_touchedShows if the input was touched by a user.boolean | undefinedfalse
_type_typeDefines either the type of the component or of the components interactive element."search" | "tel" | "text" | "url" | undefined'text'
_value_valueDefines the value of the input.string | undefinedundefined

Methods

getValue

getValue() => Promise<string | undefined>

Returns

Type: Promise<string | undefined>

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Dependencies

Depends on

  • kol-input

Graph


Live-Editor

Beispiele