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

The Switch provides configuration options for:

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

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

Disable 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.

Keyboard Navigation

For more information on the keyboard shortcuts the Switch supports, refer to the article on keyboard navigation.

Accessibility

For more information on the accessibility features of the Switch, refer to the article on accessibility.

In this article