Customizing Form
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-form-spacer | ( $kendo-padding-md-x * 2 ) | ||
Description
The padding of the inline Form. | |||
| $kendo-form-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Form. | |||
| $kendo-form-line-height | var( --kendo-line-height, normal ) | ||
Description
The line height of the Form. | |||
| $kendo-form-line-height-em | $kendo-line-height-em | ||
Description
The line height of the Form in em units. | |||
| $kendo-form-sm-line-height | 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 ) | ||
Description
The line height of the large Form. | |||
| $kendo-form-fieldset-margin | 2em 0 0 | ||
Description
The margin of the Form fieldset. | |||
| $kendo-form-fieldset-padding | 0px | ||
Description
The padding of the Form fieldset. | |||
| $kendo-form-legend-margin | 0 0 map.get( $kendo-spacing, 3 ) | ||
Description
The margin of the Form legend. | |||
| $kendo-form-legend-padding | 0px | ||
Description
The padding of the Form legend. | |||
| $kendo-form-legend-border-width | 0 0 map.get( $kendo-spacing, 0.5 ) | ||
Description
The border width of the Form legend. | |||
| $kendo-form-legend-border-style | solid | ||
Description
The border style of the Form legend. | |||
| $kendo-form-legend-border-color | var( --kendo-component-border, initial ) | ||
Description
The border color of the Form legend. | |||
| $kendo-form-legend-width | 100% | ||
Description
The width of the Form legend. | |||
| $kendo-form-legend-font-size | var( --kendo-font-size, inherit ) | ||
Description
The font size of the Form legend. | |||
| $kendo-form-legend-text-transform | uppercase | ||
Description
The text capitalization of the Form legend. | |||
| $kendo-form-label-margin-bottom | map.get( $kendo-spacing, 2 ) | ||
Description
The bottom margin of the Form label. | |||
| $kendo-form-label-font-weight | var( --kendo-font-weight-bold, inherit ) | ||
Description
The font weight of the form label | |||
| $kendo-form-button-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the Form buttons. | |||
| $kendo-form-hint-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the Form hint. | |||
| $kendo-form-hint-font-style | normal | ||
Description
The font style of the Form hint. | |||
| $kendo-form-hint-margin-top | map.get( $kendo-spacing, 1 ) | ||
Description
The top margin of the Form hint. | |||
| $kendo-form-hint-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Form hint. | |||
| $kendo-form-sm-rows-spacing | map.get( $kendo-spacing, 3 ) | ||
Description
The row spacing of the small Form. | |||
| $kendo-form-md-rows-spacing | $kendo-form-sm-rows-spacing | ||
Description
The row spacing of the medium Form. | |||
| $kendo-form-lg-rows-spacing | $kendo-form-sm-rows-spacing | ||
Description
The row spacing of the large Form. | |||
| $kendo-form-separator-margin | map.get( $kendo-spacing, 3 ) 0 0 | ||
Description
The margin of the Form separator. | |||
| $kendo-form-separator-border-color | $kendo-form-legend-border-color | ||
Description
The border color of the Form separator. | |||
| $kendo-horizontal-form-label-padding-top | map.get( $kendo-spacing, 1.5 ) | ||
Description
The top padding of the label in the horizontal Form. | |||
| $kendo-horizontal-form-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin of the label in the horizontal Form. | |||
| $kendo-horizontal-form-label-width | 25% | ||
Description
The width of the label in the horizontal Form. | |||
| $kendo-horizontal-form-label-align | 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} ) | ||
Description
The maximum width of the field wrap in the horizontal Form. | |||
| $kendo-inline-form-element-width | 25% | ||
Description
The width of the inline Form element. | |||
| $kendo-forms-invalid-color | var( --kendo-invalid-text, initial ) | ||
Description
The invalid text color of the Form. | |||
| $kendo-label-optional-margin-x | map.get( $kendo-spacing, 1.5 ) | ||
Description
The horizontal margin of the optional label in the Form. | |||
| $kendo-label-optional-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
The font size of the optional label in the Form. | |||
| $kendo-label-optional-font-style | normal | ||
Description
The font style of the optional label in the Form. | |||
| $kendo-fieldset-margin | map.get( $kendo-spacing, 7.5 ) | ||
Description
The margin of the Form fieldset. | |||
| $kendo-fieldset-font-size | var( --kendo-font-size-xl, inherit ) | ||
Description
The font size of the Form fieldset. | |||
| $kendo-fieldset-bg | transparent | ||
Description
The background color of the Form fieldset. | |||
| $kendo-fieldset-text | inherit | ||
Description
The text color of the Form fieldset. | |||
| $kendo-fieldset-border | initial | ||
Description
The border color of the Form fieldset. | |||
| $kendo-fieldset-legend-bg | transparent | ||
Description
The background color of the Form legend. | |||
| $kendo-fieldset-legend-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the Form legend. | |||
| $kendo-fieldset-legend-border | initial | ||
Description
The border color of the Form legend. | |||
| $kendo-form-sizes | (
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
)
) | ||
Description
The sizes map for the Form. | |||
