New to Kendo UI for jQuery? Download free 30-day trial

Getting Started with the TextBox

This guide demonstrates how to get up and running with the Kendo UI for jQuery TextBox.

After the completion of this guide, you will be able to achieve the following end result:

    <input id="textbox" />
    <script>
      $("#textbox").kendoTextBox({
        value: "Some text",
        fillMode: "flat",
        label: {
          content: "First name",
          floating: true
        }
      });
    </script>

1. Create an input Element

First, create an <input> element on the page that will be used to initialize the widget.

<input id="textbox" />

2. Initialize the TextBox

In this step, you will initialize the TextBox from the <input> element. Upon its initialization, the TextBox wraps the <input> element with a <span> tag.

<input id="textbox" />

<script>
    // Target the input element by using jQuery and then call the kendoTextBox() method.
    $("#textbox").kendoTextBox({
        // Add some basic configurations such as a default value.
        value: "Some text"
    });
</script>

3. Apply Stylings to the TextBox

The TextBox provides several options that enable you to modify its appearance. The following example demonstrates how to apply a flat fillMode to the component.

<input id="textbox" />

<script>
    $("#textbox").kendoTextBox({
        value: "Some text",
        fillMode: "flat" // Apply a flat fillMode.
    });
</script>

4. Configure the Label of the TextBox

The TextBox enables you to configure the label by using the label property.

<input id="textbox" />

<script>
    $("#textbox").kendoTextBox({
        value: "Some text",
        fillMode: "flat",
        label: {
          content: "First name", // Specify the label content.
          floating: true // Allow the label to float.
        }
    });
</script>

Next Steps

See Also

In this article