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.
The following code adds a simple RadioGroup to your page. Here, the value property specifies the initially selected radio button.
- <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.
- 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.
- $(function() {
- $("#radioGroupContainer").dxRadioGroup({
- dataSource: ["Low", "Normal", "Urgent", "High"],
- layout: "horizontal" // or "vertical"
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.