• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
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 kendo-textbox.

    <kendo-floatinglabel text="First name">
      <kendo-textbox [(ngModel)]="name"></kendo-textbox>
    </kendo-floatinglabel>

Selector

kendo-floatinglabel

Export Name

Accessible in templates as #kendoFloatingLabelInstance="kendoFloatingLabel"

Inputs

NameTypeDefaultDescription

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

NameTypeDefaultDescription

labelPosition

FloatingLabelPosition

Represents the current floating label position.

Events

NameTypeDescription

positionChange

EventEmitter<FloatingLabelPosition>

Fires after the floating label position is changed.

In this article

Not finding the help you need?