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	1px	1px
Description The border width of the RadioButton.
$kendo-radio-sm-size	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The size of a small RadioButton.
$kendo-radio-md-size	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The size of a medium RadioButton.
$kendo-radio-lg-size	String	k-spacing(5)	var(--kendo-spacing-5, 1.25rem)
Description The size of a large RadioButton.
$kendo-radio-sm-glyph-size	String	k-spacing(2.5)	var(--kendo-spacing-2\.5, 0.625rem)
Description The glyph size of a small RadioButton.
$kendo-radio-md-glyph-size	String	k-spacing(3.5)	var(--kendo-spacing-3\.5, 0.875rem)
Description The glyph size of a medium RadioButton.
$kendo-radio-lg-glyph-size	String	k-spacing(4.5)	var(--kendo-spacing-4\.5, 1.125rem)
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":"var(--kendo-spacing-3, 0.75rem)","glyph-size":"var(--kendo-spacing-2\\.5, 0.625rem)","ripple-size":"300%" md: "size":"var(--kendo-spacing-4, 1rem)","glyph-size":"var(--kendo-spacing-3\\.5, 0.875rem)","ripple-size":"300%" lg: "size":"var(--kendo-spacing-5, 1.25rem)","glyph-size":"var(--kendo-spacing-4\\.5, 1.125rem)","ripple-size":"300%"
Description The map with the different RadioButton sizes.
$kendo-radio-bg	String	$kendo-checkbox-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the RadioButton.
$kendo-radio-text	Null	$kendo-checkbox-text	null
Description The text color of radio button.
$kendo-radio-border	String	$kendo-checkbox-border	var(--kendo-color-border-alt, rgba(33, 37, 41, 0.2))
Description The border color of the RadioButton.
$kendo-radio-hover-bg	Null	$kendo-checkbox-hover-bg	null
Description The background color of the hovered RadioButton.
$kendo-radio-hover-text	Null	$kendo-checkbox-hover-text	null
Description The text color of the hovered RadioButton.
$kendo-radio-hover-border	Null	$kendo-checkbox-hover-border	null
Description The border color of the hovered RadioButton.
$kendo-radio-checked-bg	String	$kendo-checkbox-checked-bg	var(--kendo-color-primary, #0d6efd)
Description The background color of the checked RadioButton.
$kendo-radio-checked-text	String	$kendo-checkbox-checked-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of the checked RadioButton.
$kendo-radio-checked-border	String	$kendo-checkbox-checked-border	var(--kendo-color-primary, #0d6efd)
Description The border color of the checked RadioButton.
$kendo-radio-focus-border	String	$kendo-checkbox-focus-border	var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4))
Description The border color of the focused RadioButton.
$kendo-radio-focus-shadow	List	$kendo-checkbox-focus-shadow	0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description The box shadow of the focused RadioButton.
$kendo-radio-focus-checked-border	String	$kendo-checkbox-focus-checked-border	var(--kendo-color-primary, #0d6efd)
Description The border color of the focused and checked RadioButton.
$kendo-radio-focus-checked-shadow	List	$kendo-checkbox-focus-checked-shadow	0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 25%, transparent)
Description The box shadow of the focused and checked RadioButton.
$kendo-radio-disabled-bg	Null	$kendo-checkbox-disabled-bg	null
Description The background color of the disabled RadioButton.
$kendo-radio-disabled-text	Null	$kendo-checkbox-disabled-text	null
Description The color of the disabled RadioButton.
$kendo-radio-disabled-border	Null	$kendo-checkbox-disabled-border	null
Description The border color of the disabled RadioButton.
$kendo-radio-disabled-checked-bg	Null	$kendo-checkbox-disabled-checked-bg	null
Description The background color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-text	Null	$kendo-checkbox-disabled-checked-text	null
Description The color of the disabled and checked RadioButton.
$kendo-radio-disabled-checked-border	Null	$kendo-checkbox-disabled-checked-border	null
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	String	$kendo-checkbox-invalid-text	var(--kendo-color-error, #dc3545)
Description The text color of the invalid RadioButton.
$kendo-radio-invalid-border	String	$kendo-checkbox-invalid-border	var(--kendo-color-error, #dc3545)
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='-4 -4 8 8'%3e%3ccircle r='2' fill='var%28--kendo-color-on-primary, %23ffffff%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-margin-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
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-1, 0.25rem)
Description The vertical list item padding of the RadioButton.
$kendo-radio-ripple-bg	String	$kendo-radio-checked-bg	var(--kendo-color-primary, #0d6efd)
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