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 component.
<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>