Vue 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.

  • <template>
  • <DxRadioGroup
  • :data-source="dataSource"
  • value="Low"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxRadioGroup } from 'devextreme-vue/radio-group';
  •  
  • export default {
  • components: {
  • DxRadioGroup
  • },
  • data() {
  • return {
  • dataSource: ['Low', 'Normal', 'Urgent', 'High']
  • };
  • }
  • }
  • </script>

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.

  • <template>
  • <DxRadioGroup
  • :data-source="dataItems"
  • :value="radioGroupValue"
  • display-expr="text"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxRadioGroup } from 'devextreme-vue/radio-group';
  •  
  • const items = [
  • { text: 'Low', color: 'grey' },
  • { text: 'Normal', color: 'green' },
  • { text: 'Urgent', color: 'yellow' },
  • { text: 'High', color: 'red' }
  • ];
  •  
  • export default {
  • components: {
  • DxRadioGroup
  • },
  • data() {
  • return {
  • dataItems: items,
  • radioGroupValue: items[1]
  • };
  • }
  • }
  • </script>

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.

  • <template>
  • <DxRadioGroup
  • :data-source="dataSource"
  • layout="horizontal"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxRadioGroup } from 'devextreme-vue/radio-group';
  •  
  • export default {
  • components: {
  • DxRadioGroup
  • },
  • data() {
  • return {
  • dataSource: ['Low', 'Normal', 'Urgent', 'High']
  • };
  • }
  • }
  • </script>
See Also