Sass Variables
The Telerik and Kendo UI Form enables you to configure and customize its appearance through the available Sass variables.
As a layout component, the Form can accommodate various other components. To configure and customize the appearance of these inner components, use their respective Sass variables.
| Variable | Default Value | Computed Value | Value | ||||||
|---|---|---|---|---|---|---|---|---|---|
kendo-form-spacer | calc( #{k-spacing(2)} * 2 ) | calc(var(--kendo-spacing-2, 0.5rem) * 2) | Default: calc( #{k-spacing(2)} * 2 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 2) | ||||||
| Description: The padding of the inline Form. | |||||||||
kendo-form-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) | ||||||
| Description: The font size of the Form. | |||||||||
kendo-form-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) | ||||||
| Description: The line height of the Form. | |||||||||
kendo-form-line-height-em | calc( #{$kendo-form-line-height} * 1em ) | calc(var(--kendo-line-height, normal) * 1em) | Default: calc( #{$kendo-form-line-height} * 1em )Computed: calc(var(--kendo-line-height, normal) * 1em) | ||||||
| Description: The line height of the Form in em units. | |||||||||
kendo-form-sm-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal )Computed: var(--kendo-line-height-sm, normal) | ||||||
| Description: The line height of the small Form. | |||||||||
kendo-form-lg-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal) | ||||||
| Description: The line height of the large Form. | |||||||||
kendo-form-fieldset-margin | 2em 0 0 | (2em 0 0) | Default: 2em 0 0Computed: (2em 0 0) | ||||||
| Description: The margin of the Form fieldset. | |||||||||
kendo-form-fieldset-padding | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) | ||||||
| Description: The padding of the Form fieldset. | |||||||||
kendo-form-legend-margin | 0 0 1em | (0 0 1em) | Default: 0 0 1emComputed: (0 0 1em) | ||||||
| Description: The margin of the Form legend. | |||||||||
kendo-form-legend-padding | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) | ||||||
| Description: The padding of the Form legend. | |||||||||
kendo-form-legend-border-width | 0 0 2px | (0 0 2px) | Default: 0 0 2pxComputed: (0 0 2px) | ||||||
| Description: The border width of the Form legend. | |||||||||
kendo-form-legend-border-style | solid | solid | Default: solidComputed: solid | ||||||
| Description: The border style of the Form legend. | |||||||||
kendo-form-legend-border-color | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | ||||||
| Description: The border color of the Form legend. | |||||||||
kendo-form-legend-width | 100% | 100% | Default: 100%Computed: 100% | ||||||
| Description: The width of the Form legend. | |||||||||
kendo-form-legend-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) | ||||||
| Description: The font size of the Form legend. | |||||||||
kendo-form-legend-text-transform | uppercase | uppercase | Default: uppercaseComputed: uppercase | ||||||
| Description: The text capitalization of the Form legend. | |||||||||
kendo-form-label-margin-bottom | k-spacing(0) | var(--kendo-spacing-0, 0px) | Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px) | ||||||
| Description: The bottom margin of the Form label. | |||||||||
kendo-form-button-margin-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) | ||||||
| Description: The horizontal margin of the Form buttons. | |||||||||
kendo-form-hint-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) | ||||||
| Description: The font size of the Form hint. | |||||||||
kendo-form-hint-font-style | italic | italic | Default: italicComputed: italic | ||||||
| Description: The font style of the Form hint. | |||||||||
kendo-form-hint-margin-top | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) | ||||||
| Description: The top margin of the Form hint. | |||||||||
kendo-form-sm-rows-spacing | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) | Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem) | ||||||
| Description: The row spacing of the small Form. | |||||||||
kendo-form-md-rows-spacing | k-spacing(3.5) | var(--kendo-spacing-3\.5, 0.875rem) | Default: k-spacing(3.5)Computed: var(--kendo-spacing-3\.5, 0.875rem) | ||||||
| Description: The row spacing of the medium Form. | |||||||||
kendo-form-lg-rows-spacing | k-spacing(4.5) | var(--kendo-spacing-4\.5, 1.125rem) | Default: k-spacing(4.5)Computed: var(--kendo-spacing-4\.5, 1.125rem) | ||||||
| Description: The row spacing of the large Form. | |||||||||
kendo-form-separator-margin | $kendo-form-md-rows-spacing 0 0 | (var(--kendo-spacing-3\.5, 0.875rem) 0 0) | Default: $kendo-form-md-rows-spacing 0 0Computed: (var(--kendo-spacing-3\.5, 0.875rem) 0 0) | ||||||
| Description: The margin of the Form separator. | |||||||||
kendo-form-separator-border-color | $kendo-form-legend-border-color | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-form-legend-border-colorComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | ||||||
| Description: The border color of the Form separator. | |||||||||
kendo-horizontal-form-label-padding-top | calc( #{k-spacing(2.5)} / 2 ) | calc(var(--kendo-spacing-2\.5, 0.625rem) / 2) | Default: calc( #{k-spacing(2.5)} / 2 )Computed: 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 | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) | Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem) | ||||||
| Description: The horizontal margin of the label in the horizontal Form. | |||||||||
kendo-horizontal-form-label-width | 25% | 25% | Default: 25%Computed: 25% | ||||||
| Description: The width of the label in the horizontal Form. | |||||||||
kendo-horizontal-form-label-align | flex-end | flex-end | Default: flex-endComputed: flex-end | ||||||
| Description: The horizontal alignment of the label in the horizontal Form. | |||||||||
kendo-horizontal-form-field-wrap-max-width | calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) | calc(100% - 25% - var(--kendo-spacing-2\.5, 0.625rem)) | Default: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} )Computed: 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 | 25% | 25% | Default: 25%Computed: 25% | ||||||
| Description: The width of the inline Form element. | |||||||||
kendo-inline-form-field-padding-x | 0 k-spacing(3) | (0 var(--kendo-spacing-3, 0.75rem)) | Default: 0 k-spacing(3)Computed: (0 var(--kendo-spacing-3, 0.75rem)) | ||||||
| Description: The horizontal padding of the inline Form field. | |||||||||
kendo-inline-form-field-padding-y | calc( #{k-spacing(1)} + #{$kendo-input-border-width} ) | calc(var(--kendo-spacing-1, 0.25rem) + 1px) | Default: calc( #{k-spacing(1)} + #{$kendo-input-border-width} )Computed: calc(var(--kendo-spacing-1, 0.25rem) + 1px) | ||||||
| Description: The vertical padding of the inline Form field. | |||||||||
kendo-forms-invalid-color | $kendo-color-error | var(--kendo-color-error, #f31700) | Default: $kendo-color-errorComputed: var(--kendo-color-error, #f31700) | ||||||
| Description: The invalid text color of the Form. | |||||||||
kendo-label-optional-margin-x | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5, 0.375rem) | ||||||
| Description: The horizontal margin of the optional label in the Form. | |||||||||
kendo-label-optional-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) | ||||||
| Description: The font size of the optional label in the Form. | |||||||||
kendo-label-optional-font-style | italic | italic | Default: italicComputed: italic | ||||||
| Description: The font style of the optional label in the Form. | |||||||||
kendo-fieldset-margin | k-spacing(7.5) | var(--kendo-spacing-7\.5, 1.875rem) | Default: k-spacing(7.5)Computed: var(--kendo-spacing-7\.5, 1.875rem) | ||||||
| Description: The margin of the Form fieldset. | |||||||||
kendo-fieldset-font-size | $kendo-h4-font-size | calc(var(--kendo-font-size, 0.875rem) * 2) | Default: $kendo-h4-font-sizeComputed: calc(var(--kendo-font-size, 0.875rem) * 2) | ||||||
| Description: The font size of the Form fieldset. | |||||||||
kendo-fieldset-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the Form fieldset. | |||||||||
kendo-fieldset-text | null | null | Default: nullComputed: null | ||||||
| Description: The text color of the Form fieldset. | |||||||||
kendo-fieldset-border | null | null | Default: nullComputed: null | ||||||
| Description: The border color of the Form fieldset. | |||||||||
kendo-fieldset-legend-padding | 0 k-spacing(2) 0 0 | (0 var(--kendo-spacing-2, 0.5rem) 0 0) | Default: 0 k-spacing(2) 0 0Computed: (0 var(--kendo-spacing-2, 0.5rem) 0 0) | ||||||
| Description: The padding of the Form fieldset legend. | |||||||||
kendo-fieldset-legend-margin | calc( #{k-spacing(1.5)} * 2 ) | calc(var(--kendo-spacing-1\.5, 0.375rem) * 2) | Default: calc( #{k-spacing(1.5)} * 2 )Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) * 2) | ||||||
| Description: The margin of the Form fieldset legend | |||||||||
kendo-form-alert-error-margin | calc( #{k-spacing(1)} * 2 ) | calc(var(--kendo-spacing-1, 0.25rem) * 2) | Default: calc( #{k-spacing(1)} * 2 )Computed: calc(var(--kendo-spacing-1, 0.25rem) * 2) | ||||||
| Description: The margin of the Form alert error. | |||||||||
kendo-form-field-info-margin | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) | ||||||
| Description: The margin of the Form field info. | |||||||||
kendo-fieldset-legend-bg | null | null | Default: nullComputed: null | ||||||
| Description: The background color of the Form legend. | |||||||||
kendo-fieldset-legend-text | if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 ))Computed: var(--kendo-color-on-app-surface, #3d3d3d) | ||||||
| Description: The text color of the Form legend. | |||||||||
kendo-fieldset-legend-border | null | null | Default: nullComputed: null | ||||||
| Description: The border color of the Form legend. | |||||||||
kendo-form-sizes |
| Computed: (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. | |||||||||
