UI Widgets Switch

A switch widget.

Type: Object

The dxSwitch widget is a switch that can have an on or off state. The current widget state is specified by the value configuration option. Declare an observable variable and pass it to the value option to update the variable value each time a switch state changes.

JavaScript
var switchState = ko.observable(false);

To create a dxSwitch widget, add a div element with dxSwitch Knockout binding within the body of the required view.

HTML
<div data-bind="dxSwitch:{value:switchState}"></div>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Switch</div>
    <div class="dx-field-value" data-bind="dxSwitch: { value: switchState }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">Value</div>
    <div class="dx-field-value" data-bind="text: switchState"></div>
  </div>
</div>
switchState = ko.observable(false);

Configuration

An object defining configuration options for the dxSwitch widget.

Methods

This section describes members used to manipulate the object.