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

Floating Label

A floating label is a placeholder text for form or input fields, which floats above that field and remains visible once the user starts interacting with that field.

To implement a floating label in the Kendo UI for jQuery DropDownList, define it either as a string or from a function.

The following example demonstrates how to set the floating label as a string:

    <div class="container" style="width: 300px;"> 
      <input id="dropdownlist" style="width: 100%;"/>
    </div>


    <script>
    let data = [
        {ID: 1, ProductName: "Beds" },
        {ID: 2, ProductName: "Chairs" },
        {ID: 3, ProductName: "Sofas"},
        {ID: 4, ProductName: "Dining Tables" },
        {ID: 5, ProductName: "TV stoves" }
    ];

    $("#dropdownlist").kendoDropDownList({
        autoBind:false,
        dataTextField:"ProductName",
        dataValueField:"ID",
        filter:"contains",
        label: {
            content:"Select a product...",
            floating:true
        }
    });
    </script>

The following example demonstrates how to set the floating label from a function:

    <div class="container" style="width: 300px;"> 
      <input id="dropdownlist" style="width: 100%;"/>
    </div>


    <script>
    let data = [
        {ID: 1, ProductName: "Beds" },
        {ID: 2, ProductName: "Chairs" },
        {ID: 3, ProductName: "Sofas"},
        {ID: 4, ProductName: "Dining Tables" },
        {ID: 5, ProductName: "TV stoves" }
    ];

    $("#dropdownlist").kendoDropDownList({
        autoBind:false,
        dataTextField:"ProductName",
        dataValueField:"ID",
        filter:"contains",
        label: {
            ccntent: function(){
                return "Select a product...";
            },
            floating:true
        }
    });
    </script>

See Also

In this article