Text UI controls

Webix provides you with a wide variety of text input controls that allow users to enter, edit and format text.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

The Text control is a simple text field that can be used as a form element. More advanced controls offer enhanced functionality. Users can format the entered text, or dynamically change the number of available text fields. Using the Webix text UI controls, you can create a simple and neat web form, a lightweight online text editor, an email client, or any other application that works with text information.

RichText

The Richtext control is a multiline text field that supports formatting features. Using the available buttons you can underline the text, make it bold or italic. The most obvious use case for this control is a lightweight online text editor or an email client.

Search

The Search control is an simple text field with a 'search' icon that tells users that this field can be used for data searching and filtering. The component itself doesn't provide any searching functionality. It should be added by a developer. You can find an example in the demo below.

Start searching your favorite film

Text

The Text control is a simple one-line text field with a label. It can be used as a form element that allows users to enter data.

Textarea

The Textarea control is a multiline text field with a label. It should be used instead of Text if a large amount of text is expected for input. For example, Textarea can be a part of an email client intended for entering the body of a message.

Label

The label control can be used for creating descriptions for form fields. It can render any HTML-content or icons.

Formatting patterns

In some situations users have to insert the data that follows a particular pattern. It may be a phone number or a credit card number. Using formatting patterns, you can define an input mask that will be applied as the user types the text.

Using number templates

Multitext

The Multitext control allows changing the number of the text input fields on the fly. By clicking the '+' icon, you can add a new text field below the already available fields. Each newly created text input is equipped with a '-' icon that can be used for removing the input.