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;
}

Configuration

Checked

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;
}

Features

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.

Keyboard Navigation

The following table lists the keyboard shortcuts supported by the Switch.

SHORTCUT DESCRIPTION
Space key Toggle the component checked state.

Accessibility

To be accessible, many radio or checkbox components usually require a field set and legend elements, or a WAI ARIA substitute. In the case of the Switch component this is unnecessary, because the labels are clear.

In this article