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.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components