Skip to main content

InputNumber

Der Input-Typ Number erzeugt ein Eingabefeld für Zahlen.

Konstruktion

Code

<kol-input-number _value="74" _label="ZAHL!" _icon='{"right": "codicon codicon-dashboard"}'></kol-input-number>

Beispiel

Verwendung

Best practices

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

Tastatursteuerung

TasteFunktion
TabFokussiert das Eingabefeld.
Pfeil-Tasten (oben / unten)Erhöht oder verringert den Wert innerhalb der Attribute _min und _max entsprechend der im Attribut _step angegebenen Schrittgröße.

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 | undefinedundefined
_error_errorDefines the error message text.string | undefinedundefined
_hideLabel_hide-labelHides the label.boolean | undefinedundefined
_hint_hintDefines the hint text.string | undefined''
_icon_iconDefines the icon classnames (e.g. _icon="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_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.boolean | string | undefinedundefined
_list_list[DEPRECATED] Use _suggestions intead.

Deprecated: Gibt die Liste der Vorschlagszahlen an.
string | string[] | undefinedundefined
_max_maxDefines the largest possible input value.${number}-${number}-${number}T${number}:${number}:${number} | ${number}-${number}-${number}T${number}:${number} | ${number}-${number}-${number} | ${number}-${number} | ${number}-W${number} | ${number}:${number}:${number} | ${number}:${number} | number | undefinedundefined
_min_minDefines the smallest possible input value.${number}-${number}-${number}T${number}:${number}:${number} | ${number}-${number}-${number}T${number}:${number} | ${number}-${number}-${number} | ${number}-${number} | ${number}-W${number} | ${number}:${number}:${number} | ${number}:${number} | 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
_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 | undefinedundefined
_required_requiredMakes the input element required.boolean | undefinedundefined
_smartButton_smart-buttonAllows 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
_step_stepDefines the step size for value changes.number | undefinedundefined
_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_type[DEPRECATED] Das W3C hat die Date-Typen in eine eigene Gruppe zusammengefasst. Verwende hierfür die InputDate-Komponente.

Deprecated: Defines either the type of the component or of the components interactive element.
"date" | "datetime-local" | "month" | "number" | "time" | "week" | undefined'number'
_value_valueDefines the value of the input.${number}-${number}-${number}T${number}:${number}:${number} | ${number}-${number}-${number}T${number}:${number} | ${number}-${number}-${number} | ${number}-${number} | ${number}-W${number} | ${number}:${number}:${number} | ${number}:${number} | null | number | undefinedundefined

Slots

SlotDescription
Die Beschriftung des Eingabefeldes.

Dependencies

Depends on

Graph


Live-Editor

Beispiele