New to Kendo UI for Vue? Start a free 30-day trial
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
Border radius of radio button. | |||
| $kendo-radio-border-width | Number | 1px | 1px |
Description
Border width of radio. | |||
| $kendo-radio-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of radio. | |||
| $kendo-radio-text | Null | null | null |
Description
Color of radio. | |||
| $kendo-radio-border | Color | $kendo-component-border | #ededed |
Description
Border color of radio. | |||
| $kendo-radio-hover-bg | Null | null | null |
Description
Background color of hovered radio. | |||
| $kendo-radio-hover-text | Null | null | null |
Description
Color of hovered radio. | |||
| $kendo-radio-hover-border | Null | null | null |
Description
Border color of hovered radio. | |||
| $kendo-radio-focus-border | Null | null | null |
Description
Border color of focused radio. | |||
| $kendo-radio-focus-shadow | Null | null | null |
Description
Box shadow of focused radio. | |||
| $kendo-radio-focus-outline | Null | null | null |
Description
The outline of a focused radio. | |||
| $kendo-radio-checked-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of checked radio. | |||
| $kendo-radio-checked-text | Color | k-contrast-color( $kendo-radio-checked-bg ) | white |
Description
Color of checked radio. | |||
| $kendo-radio-checked-border | Color | $kendo-radio-checked-bg | #622331 |
Description
Border color of checked radio. | |||
| $kendo-radio-hover-checked-bg | Null | null | null |
Description
Background of hovered and checked radio. | |||
| $kendo-radio-hover-checked-text | Null | null | null |
Description
Color of checked radio. | |||
| $kendo-radio-hover-checked-border | Null | null | null |
Description
Border of hovered and checked radio. | |||
| $kendo-radio-disabled-bg | Null | null | null |
Description
Background color of disabled radio. | |||
| $kendo-radio-disabled-text | Null | null | null |
Description
Color of disabled radio. | |||
| $kendo-radio-disabled-border | Null | null | null |
Description
Border color of disabled radio. | |||
| $kendo-radio-disabled-checked-bg | Null | null | null |
Description
Background color of disabled and checked radio. | |||
| $kendo-radio-disabled-checked-text | Null | null | null |
Description
Color of disabled and checked radio. | |||
| $kendo-radio-disabled-checked-border | Null | null | null |
Description
Border color of disabled and checked radio. | |||
| $kendo-radio-invalid-bg | Color | $kendo-radio-bg | #ffffff |
Description
Background color of invalid radio. | |||
| $kendo-radio-invalid-text | Color | $kendo-invalid-text | #cf222e |
Description
Color of invalid radio. | |||
| $kendo-radio-invalid-border | Color | $kendo-invalid-border | #cf222e |
Description
Border color of invalid radio. | |||
| $kendo-radio-indicator-type | String | pseudo | pseudo |
Description
Type of radio indicator. | |||
| $kendo-radio-indicator-border-radius | Number | 50% | 50% |
Description
Border radius radio button indicator. | |||
| $kendo-radio-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
Glyph font family of radio indicator. | |||
| $kendo-radio-checked-glyph | String | "\e308" | "\e308" |
Description
Glyph of radio indicator. | |||
| $kendo-radio-image | Null | null | null |
Description
Image of radio indicator. | |||
| $kendo-radio-hover-image | Null | null | null |
Description
Image of hovered radio indicator. | |||
| $kendo-radio-checked-image | Null | null | null |
Description
Image of checked radio indicator. | |||
| $kendo-radio-hover-checked-image | Null | null | null |
Description
Image of hovered and checked radio indicator. | |||
| $kendo-radio-disabled-checked-image | Null | null | null |
Description
Image of checked radio indicator. | |||
| $kendo-radio-list-spacing | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
Spacing between items of horizontal radio list. | |||
| $kendo-radio-list-item-padding-x | Null | null | null |
Description
Horizontal padding of radio list items. | |||
| $kendo-radio-list-item-padding-y | Null | null | null |
Description
Vertical padding of radio list items. | |||
| $kendo-radio-list-item-spacing | Null | null | null |
Description
Spacing between radio and text. | |||
| $kendo-radio-ripple-bg | Color | $kendo-color-primary | #622331 |
Description
Background color of radio ripple. | |||
| $kendo-radio-ripple-opacity | Number | .25 | 0.25 |
Description
Opacity of radio ripple. | |||
