Floating Label

Floating Labels enhance the interactivity of the components by adding labels that float on top when the associated fields are focused or filled.

Sass Variables

The Telerik and Kendo UI FloatingLabel enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-floating-label-scale11Default: 1Computed: 1
Description: The transformation scale of the Floating Label.
kendo-floating-label-font-size$kendo-input-font-size14pxDefault: $kendo-input-font-sizeComputed: 14px
Description: The font size of the Floating Label.
kendo-floating-label-max-width90%90%Default: 90%Computed: 90%
Description: The maximum width of the Floating Label.
kendo-floating-label-line-height$kendo-input-line-height1.4285714286Default: $kendo-input-line-heightComputed: 1.4285714286
Description: The line height of the Floating Label.
kendo-floating-label-heightcalc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )calc(1.4285714286 * 14px)Default: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )Computed: calc(1.4285714286 * 14px)
Description: The height of the Floating Label.
kendo-floating-label-offset-xcalc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )calc(8px + 1px)Default: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )Computed: calc(8px + 1px)
Description: The horizontal offset of the Floating Label.
kendo-floating-label-offset-ycalc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )calc(calc(1.4285714286 * 14px) + 1px + 4px)Default: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )Computed: calc(calc(1.4285714286 * 14px) + 1px + 4px)
Description: The vertical offset of the Floating Label.
kendo-floating-label-focus-scale11Default: 1Computed: 1
Description: The transformation scale of the focused Floating Label.
kendo-floating-label-focus-offset-x00Default: 0Computed: 0
Description: The horizontal offset of the focused Floating Label.
kendo-floating-label-focus-offset-y00Default: 0Computed: 0
Description: The vertical offset of the focused Floating Label.
kendo-floating-label-transition.2s ease-out0.2s ease-outDefault: .2s ease-outComputed: 0.2s ease-out
Description: The transition of the Floating Label.
kendo-floating-label-bgnullnullDefault: nullComputed: null
Description: The background color of the Floating Label.
kendo-floating-label-textnullnullDefault: nullComputed: null
Description: The text color of the Floating Label.
kendo-floating-label-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused Floating Label.
kendo-floating-label-focus-textnullnullDefault: nullComputed: null
Description: The text color of the focused Floating Label.