Customizing Form

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-form-spacer	Calculation	calc( #{$kendo-padding-md-x} * 2 )	calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description The padding of the inline Form.
$kendo-form-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Form.
$kendo-form-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Form.
$kendo-form-line-height-em	Calculation	calc( #{$kendo-form-line-height} * 1em )	calc(var(--kendo-line-height, normal) * 1em)
Description The line height of the Form in em units.
$kendo-form-sm-line-height	String	var( --kendo-line-height-sm, normal )	var(--kendo-line-height-sm, normal)
Description The line height of the small Form.
$kendo-form-lg-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
Description The line height of the large Form.
$kendo-form-fieldset-margin	List	2em 0 0	2em 0 0
Description The margin of the Form fieldset.
$kendo-form-fieldset-padding	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The padding of the Form fieldset.
$kendo-form-legend-margin	List	0 0 1em	0 0 1em
Description The margin of the Form legend.
$kendo-form-legend-padding	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The padding of the Form legend.
$kendo-form-legend-border-width	List	0 0 2px	0 0 2px
Description The border width of the Form legend.
$kendo-form-legend-border-style	String	solid	solid
Description The border style of the Form legend.
$kendo-form-legend-border-color	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Form legend.
$kendo-form-legend-width	Number	100%	100%
Description The width of the Form legend.
$kendo-form-legend-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Form legend.
$kendo-form-legend-text-transform	String	uppercase	uppercase
Description The text capitalization of the Form legend.
$kendo-form-label-margin-bottom	String	k-spacing(0)	var(--kendo-spacing-0, 0px)
Description The bottom margin of the Form label.
$kendo-form-button-margin-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal margin of the Form buttons.
$kendo-form-hint-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Form hint.
$kendo-form-hint-font-style	String	italic	italic
Description The font style of the Form hint.
$kendo-form-hint-margin-top	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The top margin of the Form hint.
$kendo-form-sm-rows-spacing	String	k-spacing(2.5)	var(--kendo-spacing-2\.5, 0.625rem)
Description The row spacing of the small Form.
$kendo-form-md-rows-spacing	String	k-spacing(3.5)	var(--kendo-spacing-3\.5, 0.875rem)
Description The row spacing of the medium Form.
$kendo-form-lg-rows-spacing	String	k-spacing(4.5)	var(--kendo-spacing-4\.5, 1.125rem)
Description The row spacing of the large Form.
$kendo-form-separator-margin	List	$kendo-form-md-rows-spacing 0 0	var(--kendo-spacing-3\.5, 0.875rem) 0 0
Description The margin of the Form separator.
$kendo-form-separator-border-color	String	$kendo-form-legend-border-color	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Form separator.
$kendo-horizontal-form-label-padding-top	Calculation	calc( #{k-spacing(2.5)} / 2 )	calc(var(--kendo-spacing-2\.5, 0.625rem) / 2)
Description The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-x	String	k-spacing(2.5)	var(--kendo-spacing-2\.5, 0.625rem)
Description The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-width	Number	25%	25%
Description The width of the label in the horizontal Form.
$kendo-horizontal-form-label-align	String	flex-end	flex-end
Description The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-width	Calculation	calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )	calc(100% - 25% - var(--kendo-spacing-2\.5, 0.625rem))
Description The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-width	Number	25%	25%
Description The width of the inline Form element.
$kendo-forms-invalid-color	String	$kendo-color-error	var(--kendo-color-error, #f31700)
Description The invalid text color of the Form.
$kendo-label-optional-margin-x	String	k-spacing(1.5)	var(--kendo-spacing-1\.5, 0.375rem)
Description The horizontal margin of the optional label in the Form.
$kendo-label-optional-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the optional label in the Form.
$kendo-label-optional-font-style	String	italic	italic
Description The font style of the optional label in the Form.
$kendo-fieldset-margin	String	k-spacing(7.5)	var(--kendo-spacing-7\.5, 1.875rem)
Description The margin of the Form fieldset.
$kendo-fieldset-font-size	Calculation	$kendo-h4-font-size	calc(var(--kendo-font-size, 0.875rem) * 2)
Description The font size of the Form fieldset.
$kendo-fieldset-bg	Null	null	null
Description The background color of the Form fieldset.
$kendo-fieldset-text	Null	null	null
Description The text color of the Form fieldset.
$kendo-fieldset-border	Null	null	null
Description The border color of the Form fieldset.
$kendo-fieldset-legend-bg	Null	null	null
Description The background color of the Form legend.
$kendo-fieldset-legend-text	String	if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Form legend.
$kendo-fieldset-legend-border	Null	null	null
Description The border color of the Form legend.
$kendo-form-sizes	Map	( sm: ( form-rows-spacing: $kendo-form-sm-rows-spacing ), md: ( form-rows-spacing: $kendo-form-md-rows-spacing ), lg: ( form-rows-spacing: $kendo-form-lg-rows-spacing ) )	sm: "form-rows-spacing":"var(--kendo-spacing-2\\.5, 0.625rem)" md: "form-rows-spacing":"var(--kendo-spacing-3\\.5, 0.875rem)" lg: "form-rows-spacing":"var(--kendo-spacing-4\\.5, 1.125rem)"
Description The sizes map for the Form.

Suggested Links

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