JavaScript/jQuery RadioGroup - Overview

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.

View Demo

The following code adds a simple RadioGroup to your page. Here, the value property specifies the initially selected radio button.

HTML
JavaScript
  • <div id="radioGroupContainer"></div>
  • $(function() {
  • $("#radioGroupContainer").dxRadioGroup({
  • dataSource: ["Low", "Normal", "Urgent", "High"],
  • value: "Low"
  • });
  • });

If your data is an array of objects, bind it to the RadioGroup using the displayExpr and valueExpr properties. displayExpr specifies which data source field provides texts for buttons; valueExpr specifies which data source field provides values to be written to the value property when a button is selected. Leave valueExpr unspecified if you need the entire data object to be written to the value property.

JavaScript
  • const dataItems = [
  • { text: "Low", color: "grey" },
  • { text: "Normal", color: "green" },
  • { text: "Urgent", color: "yellow" },
  • { text: "High", color: "red" }
  • ];
  •  
  • $(function() {
  • $("#radioGroupContainer").dxRadioGroup({
  • dataSource: dataItems,
  • displayExpr: "text",
  • // valueExpr: "color",
  • value: dataItems[1]
  • });
  • });

The RadioGroup UI component supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all types of devices, specify the layout property.

JavaScript
  • $(function() {
  • $("#radioGroupContainer").dxRadioGroup({
  • dataSource: ["Low", "Normal", "Urgent", "High"],
  • layout: "horizontal" // or "vertical"
  • });
  • });
See Also