Example of Adornments in React TextBox Component

All Controls
/
Textboxes
/
Adornments

This example demonstrates the adornment capabilities of the Syncfusion TextBox component. Adornments are custom elements that can be added by using the prependTemplate and appendTemplate properties of the textbox to provide additional functionality or visual cues. This feature allows for enhanced user interaction, such as a dropdown for prefixes or clickable icons to toggle password visibility or clear input.

More Details...

Loading....
Description

This sample demonstrates the adornment feature of the Syncfusion React TextBox, showcasing how to integrate custom elements or icons at both the beginning and end of the input field

  • The first textbox displays a prepended user icon representing the username.
  • The second textbox features an appended eye icon, allowing users to toggle password visibility.
  • The third textbox combines a prepended people icon with an appended ".com" text and a trash icon that clears the input when clicked.

These examples highlight the flexibility and enhanced user experience provided by TextBox adornments.