New to Kendo UI for Angular? Start a free 30-day trial

SwitchComponent

Represents the Kendo UI Switch component for Angular.

Selector

kendo-switch

Export Name

Accessible in templates as #kendoSwitchInstance="kendoSwitch"

Inputs

disabled

boolean

Determines whether the Switch is disabled (see example).

offLabel

string

Changes the Off label so that it can be localized (see example).

onLabel

string

Changes the On label so that it can be localized (see example).

readonly

boolean

Determines whether the Switch is in its read-only state (see example).

tabindex

number

Specifies the tabindex of the Switch.

checked

boolean

Sets the value of the Switch when it is initially displayed.

size

InputSize

Specifies the width and height of the Switch.

The possible values are:

  • 'small'
  • 'medium' (default)
  • 'large'
  • null

thumbRounded

InputRounded

Specifies the border radius of the Switch thumb.

The possible values are:

  • 'full' (default)
  • 'small'
  • 'medium'
  • 'large'
  • null

trackRounded

InputRounded

Specifies the border radius of the Switch track.

The possible values are:

  • 'full' (default)
  • 'small'
  • 'medium'
  • 'large'
  • null

Events

blur

EventEmitter<any>

Fires each time the input element gets blurred.

focus

EventEmitter<any>

Fires each time the user focuses the input element.

valueChange

EventEmitter<any>

Fires each time the user selects a new value.

Methods

blur

Blurs the Switch.

focus

Focuses the Switch.

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