All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

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