• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Inputs / API / SwitchComponent / 
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

NameTypeDefaultDescription

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

NameTypeDescription

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.

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

In this article

Not finding the help you need?

Contact Support