JavaScript 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
  • Support of All Modern browsers
  • 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.

Texthighlight

The Texthighlight control is a one-line or multiline text field that supports text coloring. You can color specific characters, words or phrases, e.g. operators, invalid characters or values chosen from a dropdown list.

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.

Integration with third-party tools

Webix is a flexible JS library. It is easy to integrate with any third-party visualization tools.

Integration with third-party Rich Text Editors

Check out the documentation about JS text editor Integration.

Integration with other graphic tools

Please fill in more information regarding graphic tools integration here.