Customizing FloatingLabel

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-floating-label-scale	Number	1	1
Description The transformation scale of the Floating Label.
$kendo-floating-label-font-size	String	$kendo-input-font-size	var(--kendo-font-size-lg, inherit)
Description The font size of the Floating Label.
$kendo-floating-label-max-width	Number	90%	90%
Description The maximum width of the Floating Label.
$kendo-floating-label-line-height	Number	$kendo-input-line-height	1.25
Description The line height of the Floating Label.
$kendo-floating-label-height	Calculation	calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} )	calc(1.25 * var(--kendo-font-size-lg, inherit))
Description The height of the Floating Label.
$kendo-floating-label-offset-x	Calculation	calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} )	calc(var(--kendo-spacing-4, 1rem) + 1px)
Description The horizontal offset of the Floating Label.
$kendo-floating-label-offset-y	Calculation	calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} )	calc(calc(1.25 * var(--kendo-font-size-lg, inherit)) + 1px + var(--kendo-spacing-2, 0.5rem))
Description The vertical offset of the Floating Label.
$kendo-floating-label-focus-scale	Number	.75	0.75
Description The transformation scale of the focused Floating Label.
$kendo-floating-label-focus-offset-x	Number	0px	0px
Description The horizontal offset of the focused Floating Label.
$kendo-floating-label-focus-offset-y	Number	0px	0px
Description The vertical offset of the focused Floating Label.
$kendo-floating-label-transition	List	.15s cubic-bezier( .4, 0, .2, 1 )	0.15s cubic-bezier(0.4, 0, 0.2, 1)
Description The transition of the Floating Label.
$kendo-floating-label-bg	Null	null	null
Description The background color of the Floating Label.
$kendo-floating-label-text	String	$kendo-subtle-text	var(--kendo-color-subtle, #757575)
Description The text color of the Floating Label.
$kendo-floating-label-focus-bg	Null	null	null
Description The background color of the focused Floating Label.
$kendo-floating-label-focus-text	String	$kendo-color-primary	var(--kendo-color-primary, #3f51b5)
Description The text color of the focused Floating Label.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components