Use this extended version of the HTML input element, supporting both pure-CSS and pure-JavaScript versions.
Easily create input groups with icons, buttons, help text, and validation messages.
Add a modern look to the entered text and display floating labels using JavaScript.

Trusted by the world’s leading companies

Overview

The JavaScript TextBox (text field) is a control for editing, displaying, or entering plain text on forms to retrieve user names, phone numbers, email addresses, and more. This control is an extended version of the HTML5 TextBox (input type text) control with icons, floating labels, different sizing, grouping, validation states, and more. It is available in HTML5/CSS and JavaScript versions.

JavaScript TextBox

The JavaScript TextBox control 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 control.

JavaScript TextBox control example

HTML5/CSS TextBox

The simple HTML5 TextBox control renders using pure CSS and HTML. It supports all the essential features, such as input groups with icons, floating labels, multiline text, different sizing, and validation states.

Input group

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

Floating label (placeholder text)

The JavaScript TextBox control floats 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.

Input sizing

The HTML5 TextBox control 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 HTML forms

The TextBox validates the input value and applies corresponding validation styles for success, error, and warning states, which are used in most standard HTML forms.

Multiline TextBox

The HTML5 TextBox control is capable of handling multiple lines of text with floating labels that help you enter addresses, descriptions, comments, feedback, and more.

Multiline TextBox control documentation

Get and set text box value

Easily set or retrieve a value in the JavaScript TextBox control to process it. Enable the clear button to allow users to 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.

Right-to-left (RTL) rendering

The JavaScript TextBox control supports right-to-left (RTL) rendering. Users can change the text direction and layout to render from right to left. This improves the user experience and accessibility for users of RTL languages.

Themes

The JavaScript TextBox control has several built-in themes: Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize any of these built-in themes or create new themes either by overriding Sass variables or using our Theme Studio application.

Theme Studio application

Developer-friendly APIs

Developers can control the appearance and behaviors of the TextBox in JavaScript, including its floating label, using a rich set of APIs.

JavaScript TextBox API reference

Other supported frameworks

The TextBox component is also available for the Blazor, React, Angular, and Vue frameworks. Check out the platform-specific options through the following links:

JavaScript TextBox code example

Easily get started with the JavaScript TextBox using a few simple lines of HTML and TS code, as demonstrated below. Also explore our JavaScript TextBox example, which shows you how to render and configure the control.

html
ts
<div class="control-section">
    <div class="content-wrapper">
        <div>
            <!--element which is going to render the TextBox-->
            <input class="e-input" type="text" placeholder="Enter Date" />
        </div>
    </div>
</div>
import { InputObject, TextBox } from  '@syncfusion/ej2-inputs';
/**
 * Sample for CSS input boxes.
 */

    let outlineTextBox: TextBox = new TextBox({
        placeholder: 'Enter Date',
        cssClass: 'e-input',
        floatLabelType: 'Auto',
    });

Not sure how to create your first JavaScript TextBox? Our documentation can help.

I’d love to read it now

ALL CONTROLS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose the Syncfusion JavaScript TextBox?

The Syncfusion JavaScript TextBox lets you:

Use an extended version of the HTML input element, supporting both pure-CSS and pure-JavaScript versions.
Easily create input groups with icons, buttons, help text, and validation messages.
Selectt a standard theme like Bootstrap v5 or Tailwind CSS.
Add a modern look to your entered text and display floating labels.
Adjust the input size and use multiline mode.
Enjoy simple configuration and APIs.
Use in all modern browsers with ease.
Utilize a touch-friendly and responsive UI.
Take advantage of extensive demos and documentation to help you get started quickly with the control.

✅ Where can I find the Syncfusion JavaScript TextBox demo?

You can find our JavaScript TextBox demo here.

✅ Can I download and utilize the Syncfusion JavaScript TextBox for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with the Syncfusion JavaScript TextBox?

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Light and fast

I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version

Alexis A,

Software Architect, Small-Business

Syncfusion - Great controls and terrific support

The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It's priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.

David B,

CEO, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)