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

    Radio Group

    Documentation

    The RadioGroup is a UI component that contains a set of radio buttons and allows an end user to make a single selection from the set. This demo illustrates how to change the UI component layout, define a custom template and handle the value change event.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    @{ var priorities = new[] { "Low", "Normal", "Urgent", "High" }; } <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> @(Html.DevExtreme().RadioGroup() .Items(priorities) .Value("Low") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().RadioGroup() .Items(priorities) .Value("Normal") .Disabled(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Horizontal layout</div> <div class="dx-field-value"> @(Html.DevExtreme().RadioGroup() .Items(priorities) .Value("Low") .Layout(Orientation.Horizontal) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom item template</div> <div class="dx-field-value"> @(Html.DevExtreme().RadioGroup() .Items(priorities) .Value("Urgent") .ItemTemplate(new JS("radioGroupItemTemplate")) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Event handling</div> <div class="dx-field-value"> @(Html.DevExtreme().RadioGroup() .ID("radio-group-with-selection") .Items(priorities) .Value("Low") .OnValueChanged("radioGroup_valueChanged") ) </div> </div> </div> <div id="tasks-list"> Tasks by selected priority: <ul id="list"> <li>Non-Compete Agreements</li> </ul> </div> </div> <script> function radioGroupItemTemplate(itemData, _, itemElement) { itemElement .parent().addClass(itemData.toLowerCase()) .text(itemData); } function radioGroup_valueChanged(e) { $("#list").children().remove(); var priorities = e.component.option("items"); $.each([{ subject: "Choose between PPO and HMO Health Plan", priority: "High" }, { subject: "Non-Compete Agreements", priority: "Low" }, { subject: "Comment on Revenue Projections", priority: "Normal" }, { subject: "Sign Updated NDA", priority: "Urgent" }, { subject: "Submit Questions Regarding New NDA", priority: "High" }, { subject: "Rollout of New Website and Marketing Brochures", priority: "High" }], function(_, item) { if(item.priority === e.value) { $("#list").append($("<li/>").text(item.subject)); } }); } </script>
    using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class RadioGroupController : Controller { public ActionResult Overview() { return View(); } } }
    .low.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: gray; } .normal.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: green; } .urgent.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: orange; } .high.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { background: red; } #radio-group-with-selection { margin-bottom: 10px; } #tasks-list { margin: 0 0 10px 10px; white-space: normal; } #list { margin: 10px 0 0 20px; padding-left: 0; text-align: left; }