All Components

Switch Overview

The Switch lets the user toggle between checked and unchecked states.

Basic Usage

The following example demonstrates the Switch in action.

@Component({
    selector: 'my-app',
    template: `
        <kendo-switch [(ngModel)]="checked"></kendo-switch>
    `
})

class AppComponent {
    public checked: boolean = true;
}

Features

The Switch delivers the following features:

Checked State

The Switch enables you to set its initial value, so that each subsequent click moves the handle over the newly-selected state.

@Component({
    selector: 'my-app',
    template: `
        <kendo-switch
          [(ngModel)]="checked"
          [disabled]="disabled"
        ></kendo-switch>
    `
})

class AppComponent {
    public checked: boolean = false;
    public disabled: boolean = true;
}

Labels

The Switch enables you to control the title of the labels by using the onLabel and offLabel properties, which accept string parameters. Note that the Switch does not support long custom labels.

@Component({
    selector: 'my-app',
    template: `
        <kendo-switch
          [(ngModel)]="checked"
          [onLabel]="'I'"
          [offLabel]="'O'"
        ></kendo-switch>
    `
})

class AppComponent {
    public checked: boolean = false;
}

Disabled User Interaction

The Switch allows you to prevent user interaction with the component. By default, the Switch is enabled and the disabled property is set to false.

@Component({
    selector: 'my-app',
    template: `
        <kendo-switch
          [(ngModel)]="checked"
          [disabled]="disabled"
        ></kendo-switch>
    `
})

class AppComponent {
    public checked: boolean = true;
    public disabled: boolean = true;
}

For detailed information on the Switch configuration, refer to its client-side API documentation.

In this article