Adornments
The TextBox 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
Validation Icon
The TextBox 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 TextBox value as valid or invalid.
Loading Icon
You can display a loading icon in the TextBox by setting its showLoadingIcon property to true.
Clear button
You can display the built-in clear button inside the TextBox by setting its showClearButton property to true. The clear button will appear once there is a value inside the TextBox.
Suffix and Prefix Custom Adornments
Render custom Vue Components like Icon and Button as prefix and suffix to the TextBox and implement custom functionality on top of them.
Separator
To visually separate the specified adornments, you can add an InputSeparator.
Clear TextBox Value with Custom Solution
The TextBox can be reset by rendering a custom clickable component which controls its current value.
