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-radius | Number | 50% | 50% |
Description
The border radius of the RadioButton. | |||
| $kendo-radio-border-width | Number | 2px | 2px |
Description
The border width of the RadioButton. | |||
| $kendo-radio-sm-size | Number | k-map-get( $kendo-spacing, 3 ) | 12px |
Description
The size of a small RadioButton. | |||
| $kendo-radio-md-size | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The size of a medium RadioButton. | |||
| $kendo-radio-lg-size | Number | k-map-get( $kendo-spacing, 5 ) | 20px |
Description
The size of a large RadioButton. | |||
| $kendo-radio-sm-glyph-size | Number | k-map-get( $kendo-spacing, 2.5 ) | 10px |
Description
The glyph size of a small RadioButton. | |||
| $kendo-radio-md-glyph-size | Number | k-map-get( $kendo-spacing, 3.5 ) | 14px |
Description
The glyph size of a medium RadioButton. | |||
| $kendo-radio-lg-glyph-size | Number | k-map-get( $kendo-spacing, 4.5 ) | 18px |
Description
The glyph size of a large RadioButton. | |||
| $kendo-radio-sm-ripple-size | Number | 300% | 300% |
Description
The ripple size of a small RadioButton. | |||
| $kendo-radio-md-ripple-size | Number | 300% | 300% |
Description
The ripple size of a medium RadioButton. | |||
| $kendo-radio-lg-ripple-size | Number | 300% | 300% |
Description
The ripple size of a large RadioButton. | |||
| $kendo-radio-sizes | Map | (
sm: (
size: $kendo-radio-sm-size,
glyph-size: $kendo-radio-sm-glyph-size,
ripple-size: $kendo-radio-sm-ripple-size
),
md: (
size: $kendo-radio-md-size,
glyph-size: $kendo-radio-md-glyph-size,
ripple-size: $kendo-radio-md-ripple-size
),
lg: (
size: $kendo-radio-lg-size,
glyph-size: $kendo-radio-lg-glyph-size,
ripple-size: $kendo-radio-lg-ripple-size
)
) | (sm: (size: 12px, glyph-size: 10px, ripple-size: 300%), md: (size: 16px, glyph-size: 14px, ripple-size: 300%), lg: (size: 20px, glyph-size: 18px, ripple-size: 300%)) |
Description
The map with the different RadioButton sizes. | |||
| $kendo-radio-bg | Null | $kendo-checkbox-bg | null |
Description
The background color of the RadioButton. | |||
| $kendo-radio-text | Null | $kendo-checkbox-text | null |
Description
The color of the RadioButton. | |||
| $kendo-radio-border | Color | $kendo-checkbox-border | rgba(0, 0, 0, 0.54) |
Description
The border color of the RadioButton. | |||
| $kendo-radio-hover-bg | Null | null | null |
Description
The background color of the hovered RadioButton. | |||
| $kendo-radio-hover-text | Null | null | null |
Description
The color of the hovered RadioButton. | |||
| $kendo-radio-hover-border | Null | null | null |
Description
The border color of the hovered RadioButton. | |||
| $kendo-radio-checked-bg | Null | null | null |
Description
The background color of the checked RadioButton. | |||
| $kendo-radio-checked-text | Color | $kendo-color-primary | #3f51b5 |
Description
The color of the checked RadioButton. | |||
| $kendo-radio-checked-border | Color | $kendo-radio-checked-text | #3f51b5 |
Description
The border color of the checked RadioButton. | |||
| $kendo-radio-focus-border | Null | $kendo-checkbox-focus-border | null |
Description
The border color of the focused RadioButton. | |||
| $kendo-radio-focus-shadow | Null | $kendo-checkbox-focus-shadow | null |
Description
The box shadow of the focused RadioButton. | |||
| $kendo-radio-focus-checked-border | Null | $kendo-checkbox-focus-checked-border | null |
Description
The border color of the focused and checked RadioButton. | |||
| $kendo-radio-focus-checked-shadow | Null | $kendo-checkbox-focus-checked-shadow | null |
Description
The box shadow of the focused and checked RadioButton. | |||
| $kendo-radio-disabled-bg | Null | null | null |
Description
The background color of the disabled RadioButton. | |||
| $kendo-radio-disabled-text | Null | null | null |
Description
The color of the disabled RadioButton. | |||
| $kendo-radio-disabled-border | Color | $kendo-checkbox-disabled-border | #adadad |
Description
The border color of the disabled RadioButton. | |||
| $kendo-radio-disabled-checked-bg | Null | null | null |
Description
The background color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-text | Color | $kendo-radio-disabled-border | #adadad |
Description
The color of the disabled and checked RadioButton. | |||
| $kendo-radio-disabled-checked-border | Color | $kendo-radio-disabled-border | #adadad |
Description
The border color of disabled and checked RadioButton. | |||
| $kendo-radio-invalid-bg | Null | $kendo-checkbox-invalid-bg | null |
Description
The background color of the invalid RadioButton. | |||
| $kendo-radio-invalid-text | Color | $kendo-checkbox-invalid-text | #f31700 |
Description
The color of the invalid RadioButton. | |||
| $kendo-radio-invalid-border | Color | $kendo-checkbox-invalid-border | #f31700 |
Description
The border color of the invalid RadioButton. | |||
| $kendo-radio-indicator-type | String | image | image |
Description
The type of the RadioButton indicator. | |||
| $kendo-radio-glyph-font-family | List | "WebComponentsIcons", monospace | "WebComponentsIcons", monospace |
Description
The font family of the RadioButton indicator glyph. | |||
| $kendo-radio-checked-glyph | String | "\e308" | "\e308" |
Description
The glyph of the RadioButton indicator. | |||
| $kendo-radio-checked-image | String | k-escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e") |
Description
The image of the checked RadioButton indicator. | |||
| $kendo-radio-disabled-checked-image | String | k-escape-svg( url("data:image/svg+xml,") ) | url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e") |
Description
The image of the disabled and checked RadioButton indicator. | |||
| $kendo-radio-label-margin-x | Number | k-map-get( $kendo-spacing, 1 ) | 4px |
Description
The horizontal margin of the RadioButton inside of a label. | |||
| $kendo-radio-list-spacing | Number | k-map-get( $kendo-spacing, 4 ) | 16px |
Description
The horizontal list item margin of the RadioButton. | |||
| $kendo-radio-list-item-padding-x | Number | 0px | 0px |
Description
The horizontal list item padding of the RadioButton. | |||
| $kendo-radio-list-item-padding-y | Number | $kendo-list-md-item-padding-y | 8px |
Description
The vertical list item padding of the RadioButton. | |||
| $kendo-radio-ripple-bg | Color | $kendo-color-primary | #3f51b5 |
Description
The background color of the RadioButton ripple.. | |||
| $kendo-radio-ripple-opacity | Number | .2 | 0.2 |
Description
The opacity of the RadioButton ripple. | |||
