Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Switch

    Switch

    Documentation

    The Switch is a UI component that can be in two states: «On» (when value is true) and «Off» (when value is false).

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Switched on</div> <div class="dx-field-value"> @(Html.DevExtreme().Switch() .Value(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Switched off</div> <div class="dx-field-value"> @(Html.DevExtreme().Switch() .Value(false) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Value change handling</div> <div class="dx-field-value"> @(Html.DevExtreme().Switch() .OnValueChanged("switch_valueChanged") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().Switch() .ID("disabled") .Value(false) .Disabled(true) ) </div> </div> </div> </div> <script> function switch_valueChanged(data) { $("#disabled").dxSwitch("instance").option("value", data.value) } </script>
    using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SwitchController : Controller { public ActionResult Overview() { return View(); } } }