Customizing Radio
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-radio-border-radius | Number | 50% | 50% |
Description
The border radius of the RadioButton. | |||
| $kendo-radio-border-width | Number | 1px | 1px |
Description
The border width of the RadioButton. | |||
| $kendo-radio-sizes | Map | (
sm: (
size: k-spacing(4),
glyph-size: k-spacing(3.5),
indicator-size: k-spacing(2),
ripple-size: 300%
),
md: (
size: k-spacing(5),
glyph-size: k-spacing(4.5),
indicator-size: k-spacing(2.5),
ripple-size: 300%
),
lg: (
size: k-spacing(6),
glyph-size: k-spacing(5.5),
indicator-size: k-spacing(3),
ripple-size: 300%
)
) | (sm: (size: var(--kendo-spacing-4, 1rem), glyph-size: var(--kendo-spacing-3\.5, 0.875rem), indicator-size: var(--kendo-spacing-2, 0.5rem), ripple-size: 300%), md: (size: var(--kendo-spacing-5, 1.25rem), glyph-size: var(--kendo-spacing-4\.5, 1.125rem), indicator-size: var(--kendo-spacing-2\.5, 0.625rem), ripple-size: 300%), lg: (size: var(--kendo-spacing-6, 1.5rem), glyph-size: var(--kendo-spacing-5\.5, 1.375rem), indicator-size: var(--kendo-spacing-3, 0.75rem), ripple-size: 300%)) |
Description
The map with the different RadioButton sizes. | |||
| $kendo-radio-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the RadioButton. | |||
| $kendo-radio-text | Color | transparent | transparent |
Description
The color of the RadioButton. | |||
| $kendo-radio-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 RadioButton. | |||
| $kendo-radio-hover-bg | String | $kendo-radio-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the hovered RadioButton. | |||
| $kendo-radio-hover-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The color of the hovered RadioButton. | |||
| $kendo-radio-hover-border | String | $kendo-radio-border | var(--kendo-color-border-alt, #323130) |
Description
The border color of the hovered RadioButton. | |||
| $kendo-radio-checked-bg | String | $kendo-radio-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the checked RadioButton. | |||
| $kendo-radio-checked-text | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The color of the checked RadioButton. | |||
| $kendo-radio-checked-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 checked RadioButton. | |||
| $kendo-radio-hover-checked-bg | String | $kendo-radio-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the checked and hovered RadioButton. | |||
| $kendo-radio-hover-checked-text | 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 color of the checked and hovered RadioButton. | |||
| $kendo-radio-hover-checked-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 checked and hovered RadioButton. | |||
| $kendo-radio-focus-border | Null | null | null |
Description
The border color of the focused RadioButton. | |||
| $kendo-radio-focus-shadow | Null | null | null |
Description
The box shadow of the focused RadioButton. | |||
| $kendo-radio-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 RadioButton. | |||
| $kendo-radio-focus-outline-offset | Number | 2px | 2px |
Description
The outline offset of the focused RadioButton. | |||
| $kendo-radio-disabled-bg | String | $kendo-radio-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the disabled RadioButton. | |||
| $kendo-radio-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 color of the disabled RadioButton. | |||
| $kendo-radio-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 RadioButton. | |||
| $kendo-radio-disabled-checked-bg | String | $kendo-radio-disabled-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-text | String | $kendo-radio-disabled-text | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-border | String | $kendo-radio-disabled-border | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The border color of the disabled and checked RadioButton. | |||
| $kendo-radio-invalid-bg | String | $kendo-radio-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the invalid RadioButton. | |||
| $kendo-radio-invalid-text | String | $kendo-invalid-text | var(--kendo-color-error-on-surface, #a4262c) |
Description
The color of the invalid RadioButton. | |||
| $kendo-radio-invalid-border | String | $kendo-invalid-border | var(--kendo-color-error-emphasis, #a4262c) |
Description
The border color of the invalid RadioButton. | |||
| $kendo-radio-indicator-type | String | pseudo | pseudo |
Description
The type of the RadioButton indicator. | |||
| $kendo-radio-indicator-border-radius | Number | 50% | 50% |
Description
The border radius of the RadioButton indicator. | |||
| $kendo-radio-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The glyph font family of the RadioButton indicator. | |||
| $kendo-radio-checked-glyph | String | "\e308" | "\e308" |
Description
The glyph of the RadioButton indicator. | |||
| $kendo-radio-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 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='var%28--kendo-color-primary, %230078d4%29'/%3e%3c/svg%3e") |
Description
The image of the checked RadioButton indicator. | |||
| $kendo-radio-disabled-checked-image | Null | null | null |
Description
The image of the disabled and checked RadioButton indicator. | |||
| $kendo-radio-label-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal margin of the RadioButton inside of a label. | |||
| $kendo-radio-list-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal list item margin of the RadioButton. | |||
| $kendo-radio-list-item-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal list item padding of the RadioButton. | |||
| $kendo-radio-list-item-padding-y | String | $kendo-list-md-item-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical list item padding of the RadioButton. | |||
| $kendo-radio-list-item-gap | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The gap between the list items of the RadioButton. | |||
| $kendo-radio-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 RadioButton ripple. | |||
| $kendo-radio-ripple-opacity | Number | .25 | 0.25 |
Description
The opacity of the RadioButton ripple. | |||
