Vue RadioGroup - Customize Item Appearance

For a minor customization of RadioGroup items, you can define specific fields in item data objects. For example, the following code generates three radio buttons: the first is disabled, the second is not customized, the third is hidden.

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

If you need a more flexible solution, define an itemTemplate.

  • <template>
  • <DxRadioGroup
  • :data-source="dataSource"
  • item-template="radio">
  • <template #radio="{ data }">
  • <div>
  • <p style="font-size:larger"><b>{{data}}</b></p>
  • </div>
  • </template>
  • </DxRadioGroup>
  • </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