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

Label

configuration

Adds a label before the input. If the input has no id attribute, a generated id will be assigned. The string and the function parameters are setting the inner HTML of the label.

label

String|Function|Object

Default: null

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  label: "Fruits"
});
</script>

The function context (available through the keyword this) will be set to the widget instance.

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  label: function() {
      return "Fruits";
  }
});
</script>

label.content

String|Function

Sets the inner HTML of the label.

Default: ""

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  label: { content: "Fruits" }
});
</script>

The function context (available through the keyword this) will be set to the widget instance.

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  label: {
    content: function() {
        return "Fruits";
    }
  }
});
</script>

label.floating

Boolean

If set to true, the widget will be wrapped in a container that will allow the floating label functionality.

Important: The value method does not trigger the focusout event of the input.

This can affect the floating label functionality. To overcome this behavior, manually invoke the refresh method of the Floating Label: $("#autocomplete").data("kendoAutoComplete").label.floatingLabel.refresh();

Default: false

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  label: {
    content: "Fruits",
    floating: true
  }
});
</script>