New to Kendo UI for Vue? Start a free 30-day trial
Customizing Checkbox
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-checkbox-border-radius | Null | null | null |
Description
The border radius of the CheckBox. | |||
| $kendo-checkbox-border-width | Number | 1px | 1px |
Description
The border width of the CheckBox. | |||
| $kendo-checkbox-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the CheckBox. | |||
| $kendo-checkbox-text | Color | transparent | transparent |
Description
The text color of the CheckBox. | |||
| $kendo-checkbox-border | String | if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) | var(--kendo-color-border-alt, #323130) |
Description
The border color of the CheckBox. | |||
| $kendo-checkbox-hover-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-text | String | if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the hovered CheckBox. | |||
| $kendo-checkbox-hover-border | String | $kendo-checkbox-border | var(--kendo-color-border-alt, #323130) |
Description
The border color of the hovered CheckBox. | |||
| $kendo-checkbox-checked-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the checked CheckBox. | |||
| $kendo-checkbox-checked-text | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
The text color of the checked CheckBox. | |||
| $kendo-checkbox-checked-border | String | $kendo-checkbox-checked-bg | var(--kendo-color-primary, #0078d4) |
Description
The border color of the checked CheckBox. | |||
| $kendo-checkbox-hover-checked-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | var(--kendo-color-primary-hover, #106ebe) |
Description
The background of the hovered and checked CheckBox. | |||
| $kendo-checkbox-hover-checked-text | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
The text color of the hovered and checked CheckBox. | |||
| $kendo-checkbox-hover-checked-border | String | $kendo-checkbox-hover-checked-bg | var(--kendo-color-primary-hover, #106ebe) |
Description
The border color of the hovered and checked CheckBox. | |||
| $kendo-checkbox-focus-border | Null | null | null |
Description
The border color of the focused CheckBox. | |||
| $kendo-checkbox-focus-shadow | Null | null | null |
Description
The box shadow of the focused CheckBox. | |||
| $kendo-checkbox-focus-outline | List | 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | 1px solid var(--kendo-color-base-emphasis, #605e5c) |
Description
The outline of the focused CheckBox. | |||
| $kendo-checkbox-indeterminate-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-text | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) | var(--kendo-color-primary, #0078d4) |
Description
The text color of the indeterminate CheckBox. | |||
| $kendo-checkbox-indeterminate-border | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The border color of the indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-text | String | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) | var(--kendo-color-primary-hover, #106ebe) |
Description
The text color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-hover-indeterminate-border | String | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | var(--kendo-color-primary-hover, #106ebe) |
Description
The border color of the hovered and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The text color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The border color of the disabled CheckBox. | |||
| $kendo-checkbox-disabled-checked-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The background color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-text | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
The text color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-checked-border | Color | if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) | transparent |
Description
The border color of the disabled and checked CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The border color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-disabled-indeterminate-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The border color of the disabled and indeterminate CheckBox. | |||
| $kendo-checkbox-invalid-bg | String | $kendo-checkbox-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-text | String | $kendo-invalid-text | var(--kendo-color-error-on-surface, #a4262c) |
Description
The text color of an invalid CheckBox. | |||
| $kendo-checkbox-invalid-border | String | $kendo-invalid-border | var(--kendo-color-error-emphasis, #a4262c) |
Description
The border color of an invalid CheckBox. | |||
| $kendo-checkbox-indicator-type | String | image | image |
Description
The type of the CheckBox indicator. | |||
| $kendo-checkbox-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The font family of the CheckBox indicator glyph. | |||
| $kendo-checkbox-checked-glyph | String | "\e118" | "\e118" |
Description
The glyph of the CheckBox indicator. | |||
| $kendo-checkbox-indeterminate-glyph | String | "\e121" | "\e121" |
Description
The glyph of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-hover-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-on-app-surface, %23323130%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") |
Description
The image of the hovered CheckBox indicator. | |||
| $kendo-checkbox-checked-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") |
Description
The image of the checked CheckBox indicator. | |||
| $kendo-checkbox-indeterminate-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e") |
Description
The image of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-hover-checked-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") |
Description
The image of the hovered and checked CheckBox indicator. | |||
| $kendo-checkbox-hover-indeterminate-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='var%28--kendo-color-primary-hover, %23106ebe%29'/%3e%3c/svg%3e") |
Description
The image of the hovered and indeterminate CheckBox indicator. | |||
| $kendo-checkbox-disabled-checked-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='var%28--kendo-color-app-surface, %23ffffff%29' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") |
Description
The image of the checked CheckBox indicator. | |||
| $kendo-checkbox-disabled-indeterminate-image | String | escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect x='3' y='3' width='10' height='10' rx='2' fill='color-mix%28in srgb, var%28--kendo-color-on-app-surface, %23323130%29 28%25, transparent%29'/%3e%3c/svg%3e") |
Description
The image of the indeterminate CheckBox indicator. | |||
| $kendo-checkbox-label-margin-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the CheckBox inside a label. | |||
| $kendo-checkbox-list-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the items in a horizontal CheckBox list. | |||
| $kendo-checkbox-list-item-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the CheckBox list items. | |||
| $kendo-checkbox-list-item-padding-y | String | $kendo-list-md-item-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the CheckBox list items. | |||
| $kendo-checkbox-ripple-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the CheckBox' ripple. | |||
| $kendo-checkbox-ripple-opacity | Number | .25 | 0.25 |
Description
The opacity of the CheckBox' ripple. | |||
