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

FloatingLabelComponent

Represents the Kendo UI FloatingLabel component for Angular. Provides floating labels to input elements.

The FloatingLabel supports both Template and Reactive Forms and can contain Kendo UI for Angular Input components such as kendo-combobox and kendo-numerictextbox, or HTML Input elements with the kendoTextBox directive applied.


@Component({
  selector: 'my-app',
  template: `
    <kendo-floatinglabel text="First name">
      <input [(ngModel)]="name" kendoTextBox />
    </kendo-floatinglabel>
  `
})
class AppComponent {
    public name = 'John';
}

Selector

kendo-floatinglabel

Export Name

Accessible in templates as #kendoFloatingLabelInstance="kendoFloatingLabel"

Inputs

id

string

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

labelCssClass

any

Sets the CSS Classes that will be rendered on the actual label element. Supports the type of values that are supported by ngClass directive.

labelCssStyle

any

Sets the CSS Styles that will be rendered on the actual label element. Supports the type of values that are supported by ngStyle directive.

optional

boolean

Allows marking a form field as optional. By default renders the Optional text when enabled. The text can be customized by providing a custom message (see example).

The default value is false

text

string

Specifies the text content of the floating label which describes the input.

Fields

labelPosition

FloatingLabelPosition

Represents the current floating label position.

Events

positionChange

EventEmitter<FloatingLabelPosition>

Fires after the floating label position is changed.