/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FormComponentProps } from '@progress/kendo-vue-common'; import { PropType } from 'vue'; import { InputFocusEvent } from './InputFocusEvent'; import { InputBlurEvent } from './InputBlurEvent'; /** * Represents the props of the [KendoVue Input component]({% slug overview_textbox %}). * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). */ export interface InputProps extends FormComponentProps { /** * Renders a floating label for the Input component. */ id?: string; label?: string; value?: string | string[] | number; modelValue?: string | number; defaultValue?: string | string[] | number | undefined; disabled?: boolean; validate?: boolean; /** * Configures the `size` of the Input. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Input. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Input. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; dir?: string; /** * Fires when the `change` event of the input is triggered. */ onChange?: (event: any) => void; /** * Fires when the `input` event of the input is triggered. */ onInput?: (event: any) => void; /** * Fires when the input is focused. */ onFocus?: (event: any) => void; /** * Fires when the input is blurred. */ onBlur?: (event: any) => void; /** * Fires when the 'keyup' input event is triggered. */ onKeyup?: (event: any) => void; /** * Fires when the 'keydown' input event is triggered. */ onKeydown?: (event: any) => void; /** * Fires when the 'keypress' input event is triggered. */ onKeypress?: (event: any) => void; /** * Specifies the placeholder of an `input` element. Used to define if the input is empty. */ placeholder?: string; /** * Defines a string prop that controls the input icon. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ iconName?: string; /** * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ inputPrefix?: boolean | string | object | Function; /** * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ inputSuffix?: boolean | string | object | Function; /** * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showValidationIcon?: boolean; /** * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showLoadingIcon?: boolean; /** * * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ showClearButton?: boolean; /** * Defines additional class to the wrapper element. * * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component. */ wrapperClass?: string; /** * Defines tabindex to the input element. */ tabIndex?: number; /** * Defines additional class to the input element. */ inputClass?: string; /** * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * Identifies the element(s) which will label the component. */ ariaDescribedBy?: string; /** * Defines a string value that labels an interactive element. */ ariaLabelledBy?: string; /** * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario. */ minlength?: string; /** * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs. * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario. */ maxlength?: string; } /** * @hidden */ declare const Input: import('vue').DefineComponent; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: PropType; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; inputClass: PropType; tabIndex: PropType; ariaLabel: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; }>, { inputRef: import('vue').Ref; }, { hasMounted: boolean; autofill: boolean; currentValue: string | number | string[]; valueDuringOnChange: string; focused: boolean; }, { spanClassNames(): { 'k-floating-label-container': boolean; 'k-focus': any; 'k-empty': boolean; 'k-autofill': any; 'k-invalid': boolean; 'k-rtl': boolean; }; inputInnerClass(): { [x: string]: any; [x: number]: any; 'k-input': boolean; 'k-invalid': boolean; 'k-required': any; 'k-disabled': any; }; computedValue(): any; }, { updateValidClass(): void; emitFocus(e: FocusEvent): void; emitBlur(e: FocusEvent): void; handleKeydown(e: any): void; handleKeyup(e: any): void; handleKeypress(e: any): void; clearClick(event: any): void; focus(): void; validity(): { customError: boolean; valid: any; badInput: any; patternMismatch: any; rangeOverflow: any; rangeUnderflow: any; stepMismatch: any; tooLong: any; tooShort: any; typeMismatch: any; valueMissing: any; }; isInvalid(state: Object): boolean; setValidity(): void; handleInput(event: any): void; handleChange(event: any): void; emitUpdate(event: any, eventName: string, value: any): void; handleAutoFill(e: any): void; handleAutoFillEnd(e: any): void; name: () => any; }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, { input: (event: any) => true; change: (event: any) => true; changemodel: (value: string | number) => true; 'update:modelValue': (value: string | number) => true; focus: (event: InputFocusEvent) => true; blur: (event: InputBlurEvent) => true; keyup: (event: KeyboardEvent) => true; keydown: (event: KeyboardEvent) => true; keypress: (event: KeyboardEvent) => true; }, string, import('vue').PublicProps, Readonly; default: any; }; disabled: { type: PropType; default: any; }; defaultValue: { type: PropType; default: string; }; value: { type: PropType; }; label: { type: PropType; }; placeholder: { type: PropType; }; required: { type: PropType; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; rounded: { type: PropType<"small" | "medium" | "large" | "full" | "none">; validator: (value: string) => boolean; }; fillMode: { type: PropType<"flat" | "solid" | "outline">; validator: (value: string) => boolean; }; dir: { type: PropType; }; id: PropType; valid: { type: PropType; default: any; }; validate: { type: PropType; }; validationMessage: { type: PropType; }; validityStyles: { type: PropType; default: boolean; }; inputClass: PropType; tabIndex: PropType; ariaLabel: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; }>> & Readonly<{ onInput?: (event: any) => any; onBlur?: (event: InputBlurEvent) => any; onChange?: (event: any) => any; onFocus?: (event: InputFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onKeypress?: (event: KeyboardEvent) => any; onKeyup?: (event: KeyboardEvent) => any; onChangemodel?: (value: string | number) => any; "onUpdate:modelValue"?: (value: string | number) => any; }>, { required: boolean; disabled: boolean; modelValue: string | number; defaultValue: string | number | string[]; valid: boolean; validityStyles: boolean; }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>; export { Input };