Prefix & Suffix Adornments
Input provides configuration properties for adding items as
suffix adornments. The component can display both built-in and custom adornments. Below you can find more details about the different configuration options.
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.
You can display a loading icon in the
Input by setting its showLoadingIcon property to
You can display the built-in
clear button inside the
Input by setting its showClearButton property to
clear button will appear once there is a value inside the
In scenarios when we need to display a separator in the adornments, we can use the
InputSeparator component as demonstrated in the following example.
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.
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.
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