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

Customizing Form

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-form-spacerCalculationcalc( #{$kendo-padding-md-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description
The padding of the inline Form.
$kendo-form-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Form.
$kendo-form-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Form.
$kendo-form-line-height-emCalculation$kendo-line-height-emcalc(1.4285714286 * 1em)
Description
The line height of the Form in em units.
$kendo-form-sm-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the small Form.
$kendo-form-lg-line-heightStringvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)
Description
The line height of the large Form.
$kendo-form-fieldset-marginList2em 0 02em 0 0
Description
The margin of the Form fieldset.
$kendo-form-fieldset-paddingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The padding of the Form fieldset.
$kendo-form-legend-marginList0 0 k-spacing(3)0 0 var(--kendo-spacing-3, 0.75rem)
Description
The margin of the Form legend.
$kendo-form-legend-paddingStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The padding of the Form legend.
$kendo-form-legend-border-widthList0 0 k-spacing(0.5)0 0 var(--kendo-spacing-0\.5, 0.125rem)
Description
The border width of the Form legend.
$kendo-form-legend-border-styleStringsolidsolid
Description
The border style of the Form legend.
$kendo-form-legend-border-colorStringvar( --kendo-component-border, initial )var(--kendo-component-border, initial)
Description
The border color of the Form legend.
$kendo-form-legend-widthNumber100%100%
Description
The width of the Form legend.
$kendo-form-legend-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Form legend.
$kendo-form-legend-text-transformStringuppercaseuppercase
Description
The text capitalization of the Form legend.
$kendo-form-label-margin-bottomStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The bottom margin of the Form label.
$kendo-form-label-font-weightStringvar( --kendo-font-weight-bold, inherit )var(--kendo-font-weight-bold, inherit)
Description
The font weight of the form label
$kendo-form-button-margin-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal margin of the Form buttons.
$kendo-form-hint-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the Form hint.
$kendo-form-hint-font-styleStringnormalnormal
Description
The font style of the Form hint.
$kendo-form-hint-margin-topStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The top margin of the Form hint.
$kendo-form-hint-textStringif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))var(--kendo-color-subtle, #605e5c)
Description
The text color of the Form hint.
$kendo-form-sm-rows-spacingStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The row spacing of the small Form.
$kendo-form-md-rows-spacingString$kendo-form-sm-rows-spacingvar(--kendo-spacing-3, 0.75rem)
Description
The row spacing of the medium Form.
$kendo-form-lg-rows-spacingString$kendo-form-sm-rows-spacingvar(--kendo-spacing-3, 0.75rem)
Description
The row spacing of the large Form.
$kendo-form-separator-marginListk-spacing(3) 0 0var(--kendo-spacing-3, 0.75rem) 0 0
Description
The margin of the Form separator.
$kendo-form-separator-border-colorString$kendo-form-legend-border-colorvar(--kendo-component-border, initial)
Description
The border color of the Form separator.
$kendo-horizontal-form-label-padding-topStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The top padding of the label in the horizontal Form.
$kendo-horizontal-form-label-margin-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal margin of the label in the horizontal Form.
$kendo-horizontal-form-label-widthNumber25%25%
Description
The width of the label in the horizontal Form.
$kendo-horizontal-form-label-alignStringflex-endflex-end
Description
The horizontal alignment of the label in the horizontal Form.
$kendo-horizontal-form-field-wrap-max-widthCalculationcalc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )calc(100% - 25% - var(--kendo-spacing-2, 0.5rem))
Description
The maximum width of the field wrap in the horizontal Form.
$kendo-inline-form-element-widthNumber25%25%
Description
The width of the inline Form element.
$kendo-forms-invalid-colorStringvar( --kendo-invalid-text, initial )var(--kendo-invalid-text, initial)
Description
The invalid text color of the Form.
$kendo-label-optional-margin-xStringk-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-sizeStringvar( --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-styleStringnormalnormal
Description
The font style of the optional label in the Form.
$kendo-fieldset-marginStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The margin of the Form fieldset.
$kendo-fieldset-font-sizeStringvar( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The font size of the Form fieldset.
$kendo-fieldset-bgColortransparenttransparent
Description
The background color of the Form fieldset.
$kendo-fieldset-textStringinheritinherit
Description
The text color of the Form fieldset.
$kendo-fieldset-borderStringinitialinitial
Description
The border color of the Form fieldset.
$kendo-fieldset-legend-bgColortransparenttransparent
Description
The background color of the Form legend.
$kendo-fieldset-legend-textStringif($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))var(--kendo-color-subtle, #605e5c)
Description
The text color of the Form legend.
$kendo-fieldset-legend-borderStringinitialinitial
Description
The border color of the Form legend.
$kendo-form-sizesMap( 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-3, 0.75rem)"
  • md: "form-rows-spacing":"var(--kendo-spacing-3, 0.75rem)"
  • lg: "form-rows-spacing":"var(--kendo-spacing-3, 0.75rem)"
Description
The sizes map for the Form.

In this article

Not finding the help you need?