SwitchComponent

Represents the Kendo UI Switch component for Angular.

Selector

kendo-switch

Export Name

Accessible in templates as #kendoSwitchInstance="kendoSwitch"

Inputs

Name	Type	Default	Description
checked	boolean		Sets the value of the Switch when it is initially displayed.
disabled	boolean		Determines whether the Switch is disabled (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.
offLabel	string		Sets the Off label (see example). Takes precedence over the custom messages component.
onLabel	string		Sets the On label (see example). Takes precedence over the custom messages component.
readonly	boolean	false	Determines whether the Switch is in its read-only state (see example).
size	InputSize		Specifies the width and height of the Switch. The possible values are: small medium (default) large none
tabindex	number		Specifies the tabindex of the Switch.
thumbRounded	InputRounded		Specifies the border radius of the Switch thumb. The possible values are: full (default) small medium large none
trackRounded	InputRounded		Specifies the border radius of the Switch track. The possible values are: full (default) small medium large none

Events

Name	Type	Description
blur	EventEmitter<SwitchBlurEvent>	Fires each time the Switch component is blurred as a result of user interaction.
focus	EventEmitter<SwitchFocusEvent>	Fires each time the Switch component is focused as a result of user interaction.
valueChange	EventEmitter<any>	Fires each time the user selects a new value.

Methods

blur
Blurs the Switch.

focus
Focuses the Switch. ts @Component({ selector: 'my-app', template: ` <button (click)="switch.focus()">Focus</button> <kendo-switch #switch></kendo-switch> ` }) class AppComponent { }