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

FloatingLabelComponent

Component

Represents the Kendo UI FloatingLabel component for Angular. Use this component to provide floating labels to input elements.

The FloatingLabel supports Template and Reactive Forms. You can use it with Kendo UI for Angular Inputs components such as kendo-combobox, kendo-numerictextbox, or kendo-textbox. See example.

Definition

Package:@progress/kendo-angular-label

Selector:kendo-floatinglabel

Export Name:Accessible in templates as #kendoFloatingLabelInstance="kendoFloatingLabel"

Syntax:

html

<kendo-floatinglabel text="First name">
  <kendo-textbox></kendo-textbox>
</kendo-floatinglabel>

Inputs

id

string

Sets the id attribute of the input inside the floating label.

labelCssClass

any

Sets the CSS classes for the label element. Accepts values supported by the ngClass directive.

labelCssStyle

any

Sets the CSS styles for the internal label element. Accepts values supported by the ngStyle directive.

optional

boolean

Marks a form field as optional. When enabled, renders the Optional text by default. You can customize the text by providing a custom message (see example).

Default:

false

text

string

Sets the text content of the floating label that describes the input.

Fields

labelPosition

FloatingLabelPosition

Gets the current floating label position.

Events

positionChange

EventEmitter<FloatingLabelPosition>

Fires after the FloatingLabel position changes.