The Vue and pure CSS text box component is used to edit or display text on forms to capture user names, phone numbers, etc. This component is an extended version of the HTML input element with icons, floating labels, different sizing, grouping, validation states, and more.
The text box can be rendered by using either a Vue version of the text box or a pure CSS-based text box. The Vue version helps add floating labels easily with minimal configuration, and can support all the features available in the pure CSS version of text box component.
Users can group icons, buttons, or text inside the text box with floating labels. This helps the user design common application interfaces like a text box with a search icon or @ with a username.
The text box component floats placeholder text when the input receives focus. This can be achieved with or without a required attribute.
The text box control allows users to add different form sizing classes to help them resize content automatically inside input group elements.
There are validation styles for success, error, and warning states, which are used in most form controls.
This feature allows the text box control to handle more than one line of input.