Getting Started
    Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • Notificationnew
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollViewnew
    • Tooltip
    • TreeListnew
    • TreeViewnew
    • Upload
    Wrapper Components
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

Prefix & Suffix Adornments

The Input provides configuration properties for adding items as prefix and suffix adornments. The component can display both built-in and custom adornments. Below you can find more details about the different configuration options.

Built-In Adornments

IconName

Using the iconName prop of the Input component, we can add the built-in Kendo UI Icons.

Example
View Source
Change Theme:

Validation Icon

The Input component provides the showValidationIcon prop that can be used in a combination with the inputClass or the valid properties. Configuring a combination of these properties we can show a validation icon that marks the Input value as valid or invalid.

Example
View Source
Change Theme:

Loading Icon

You can display a loading icon in the Input by setting its showLoadingIcon property to true.

Example
View Source
Change Theme:

Clear button

You can display the built-in clear button inside the Input by setting its showClearButton property to true. The clear button will appear once there is a value inside the Input.

Example
View Source
Change Theme:

Separator

In scenarios when we need to display a separator in the adornments, we can use the InputSeparator component as demonstrated in the following example.

Example
View Source
Change Theme:

Prefix Adornments Customization

The Input component allows you to define custom template that will be visualized as a prefix inside the component. To define a custom prefix, use the inputPrefix property as in the following example.

Example
View Source
Change Theme:

Suffix Adornments Customization

The Input component allows you to define custom template that will be visualized as a suffix inside the component. To define a custom suffix, use the inputSuffix property as in the following example.

Example
View Source
Change Theme:

Disabled Adornments

All adornments defined for the Input component are automatically enabled/disabled based on the disabled property. The property controls the enabled/disabled state of the whole Input.

Example
View Source
Change Theme: