Zum Hauptinhalt springen

InputNumber

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

Konstruktion

Code

<kol-input-number _id="meine_zahl" _name="meine_zahl" _value="74">ZAHL!</kol-input-number>

Beispiel

ZAHL!

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-keyGibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.string | undefinedundefined
_alert_alertGibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.boolean | undefinedtrue
_autoComplete_auto-completeGibt an, ob das Eingabefeld autovervollständigt werden kann."off" | "on" | undefinedundefined
_disabled_disabledSetzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.boolean | undefinedundefined
_error_errorGibt den Text für eine Fehlermeldung an.string | undefinedundefined
_hideLabel_hide-labelVersteckt das sichtbare Label des Elements.boolean | undefinedundefined
_hint_hintGibt den Hinweistext an.string | undefined''
_icon_iconErmöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }undefined
_id_idGibt die technische ID des Eingabefeldes an.string | undefinedundefined
_list_listGibt die Liste der Vorschlagszahlen an.string | string[] | undefinedundefined
_max_maxGibt den größtmöglichen Zahlenwert an.${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_minGibt den kleinstmöglichen Zahlenwert an.${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_nameGibt den technischen Namen des Eingabefeldes an.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für das Input-Event an.InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus | undefinedundefined
_placeholder_placeholderGibt den Platzhalter des Eingabefeldes an, wenn es leer ist.string | undefinedundefined
_readOnly_read-onlySetzt das Eingabefeld in den schreibgeschützten Modus.boolean | undefinedundefined
_required_requiredMacht das Eingabeelement zu einem Pflichtfeld.boolean | undefinedundefined
_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
_step_stepGibt die Schrittweite der Wertveränderung annumber | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index dieses Input hat.number | undefinedundefined
_touched_touchedGibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.boolean | undefinedfalse
_type_type[DEPRECATED] Das W3C hat die Date-Typen in eine eigene Gruppe zusammengefasst. Verwende hierfür die InputDate-Komponente.

Gibt an, ob es ein DateTime-, Date-, Month-, Week-, Time-, DateTime-Local-, Number-Eingabefeld ist.
"date" | "datetime-local" | "month" | "number" | "time" | "week" | undefined'number'
_value_valueGibt den Wert des Eingabefeldes an.${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

Used by

Depends on

  • kol-input

Graph


Live-Editor

Beispiele