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.
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.