Angular TextBox (Text Field) with Floating Label

Angular TextBox

This component provides a floating label with minimal configuration. It supports most of the features that are available in the pure HTML5/CSS version of the TextBox component.

• Angular TextBox component example.

HTML5/CSS TextBox

Render a simple text box using pure CSS and HTML. The component supports all the essential features, such as input groups with icons, floating labels, multiline text, different sizing, and validation states.

• TextBox component example
• TextBox component documentation

Input group

Easily create input groups by prepending or appending icons, buttons, or text with floating labels in the TextBox component. For example, you can prepend text with a dollar symbol ($) for price input or an at sign (@) for username.

• Input group example.
• Input group documentation.

Floating label (placeholder text)

Float placeholder text at the top of the input box with an animation when the input receives focus or has a value. The floating label ensures that the input value and label are always visible.

• Floating label TextBox component example.
• Floating label TextBox component documentation.

Input sizing

The TextBox has built-in sizing support (normal and small modes) to fit the input box’s size with sufficient padding and spacing.

• Input sizing documentation.

Input validation with Angular forms

The component works seamlessly with Angular template-driven forms, reactive forms, and native HTML forms. It also supports applying corresponding validation styles for success, error, and warning states.

• Template-driven forms example.
• Reactive forms example.

Multiline TextBox

The TextBox component is capable of handling multiple lines of text with floating labels to help you accept addresses, descriptions, comments, feedback, and more.

• Multiline TextBox component documentation.

Get and set text box values

Easily set or retrieve a value in the Angular TextBox component to process it and enable a clear button to allow users reset the input value.

• Clear button documentation.

Adornments

The TextBox control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements.

• Adornments example
• Adornments documentation

Right-to-left (RTL) rendering

The Angular TextBox supports right-to-left (RTL) rendering. Users can change the text direction and layout of the TextBox to be right to left. This improves the user experience and accessibility for those working with RTL languages.