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

    Check Box

    Documentation

    The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific option has been chosen.

    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">Checked</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .Value(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Unchecked</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .Value(false) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Indeterminate</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .Value(new JS("undefined")) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Value change handling</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .Value(new JS("undefined")) .OnValueChanged("checkBox_valueChanged") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .ID("disabled") .Value(new JS("undefined")) .Disabled(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">With label</div> <div class="dx-field-value"> @(Html.DevExtreme().CheckBox() .Value(true) .Width(80) .Text("Check") ) </div> </div> </div> </div> <script> function checkBox_valueChanged(data) { $("#disabled").dxCheckBox("instance").option("value", data.value); } </script>
    using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class CheckBoxController : Controller { public ActionResult Overview() { return View(); } } }