Vue UI Components Documentation

Sets or gets the delay of the fade animation when the Radio Button is going to be checked.

<template>
  <JqxRadioButton ref="myRadioButton"
    :animationShowDelay="500">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets the delay of the fade animation when the Radio Button is going to be unchecked.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton" 
      :animationHideDelay="500">
      Radio Button 1 
    </JqxRadioButton> 
    <JqxRadioButton ref="myRadioButton" 
      :animationHideDelay="500">
      Radio Button 2 
    </JqxRadioButton>
  </div> 
</template>
 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue'; 
 
  export default { 
    components: { 
      JqxRadioButton 
    } 
  } 
</script>

Sets or gets the Radio Button's size.

<template>
  <JqxRadioButton ref="myRadioButton"
    :boxSize="'18px'">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets whether the radio button is checked.

<template>
  <JqxRadioButton ref="myRadioButton"
    :checked="true">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets whether the Radio Button is disabled.

<template>
  <JqxRadioButton ref="myRadioButton"
    :disabled="true">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets whether the clicks on the container are handled as clicks on the rounded button.

<template>
  <JqxRadioButton ref="myRadioButton"
    :enableContainerClick="false">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets the group name. When this property is set, checking a radio button from the group, will uncheck only the radio buttons from the same group.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton" :groupName="'Group1'">Group1 Button</JqxRadioButton> 
    <JqxRadioButton ref="myRadioButton" :groupName="'Group1'">Group1 Button</JqxRadioButton> 
    <br /> 
    <JqxRadioButton ref="myRadioButton" :groupName="'Group2'">Group2 Button</JqxRadioButton> 
    <JqxRadioButton ref="myRadioButton" :groupName="'Group2'">Group2 Button</JqxRadioButton> 
  </div> 
</template> 
 
<script> 
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  } 
</script>

Sets or gets whether the radio button has 3 states - checked, unchecked and indeterminate.

<template>
  <div> 
    <JqxRadioButton ref="myRadioButton" 
      :checked="null" :hasThreeStates="true"> 
      Radio Button 
    </JqxRadioButton> 
    <JqxRadioButton ref="myRadioButton" 
      :checked="null" :hasThreeStates="true">
      Radio Button 
    </JqxRadioButton> 
  </div> 
</template> 
 
<script> 
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue'; 
 
  export default { 
    components: { 
      JqxRadioButton 
    } 
  } 
</script>

Sets or gets the jqxRadioButton's height.

<template>
  <JqxRadioButton ref="myRadioButton"
    :height="50">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxRadioButton ref="myRadioButton"
    :rtl="true">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxRadioButton ref="myRadioButton"
    :theme="'material'">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

Sets or gets the jqxRadioButton's width.

<template>
  <JqxRadioButton ref="myRadioButton"
    :width="150">
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    }
  }
</script>

This event is triggered when the Radio Button is checked.

Code examples

Bind to the checked event of jqxRadioButton.

<template>
  <JqxRadioButton ref="myRadioButton" @checked="onChecked($event)"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    methods: {
      onChecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when the Radio Button's state changes from one state to another.

Code examples

Bind to the change event of jqxRadioButton.

<template>
  <JqxRadioButton ref="myRadioButton" @change="onChange($event)"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the Radio Button is unchecked.

Code examples

Bind to the unchecked event of jqxRadioButton.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton1" @unchecked="onUnchecked($event)">Radio Button 1</JqxRadioButton>
    <JqxRadioButton ref="myRadioButton2" @unchecked="onUnchecked($event)">Radio Button 2</JqxRadioButton>
  </div>
</template>

<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';

  export default {
    components: {
      JqxRadioButton
    },
    methods: {
      onUnchecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Checks the radio button.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton">Radio Button</JqxRadioButton>
    <JqxButton @click="check()">Check</JqxButton>
    <JqxButton @click="uncheck()">Uncheck</JqxButton>
  </div>
</template>

<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxRadioButton,
      JqxButton
    },
    methods: {
      check: function () {
        this.$refs.myRadioButton.check();
      },
      uncheck: function () {
        this.$refs.myRadioButton.uncheck();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Disables the radio button.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton">Radio Button</JqxRadioButton>
    <JqxButton @click="enable()">Enable</JqxButton>
    <JqxButton @click="disable()">Disable</JqxButton>
  </div>
</template>
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRadioButton,
      JqxButton
    },
    methods: {
      enable: function () {
        this.$refs.myRadioButton.enable();
      },
      disable: function () {
        this.$refs.myRadioButton.disable();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Destroys the widget.

<template>
  <JqxRadioButton ref="myRadioButton"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    mounted: function () {
      this.$refs.myRadioButton.destroy();
    }
  }
</script>

Enables the radio button.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton">Radio Button</JqxRadioButton>
    <JqxButton @click="enable()">Enable</JqxButton>
    <JqxButton @click="disable()">Disable</JqxButton>
  </div>
</template>
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRadioButton,
      JqxButton
    },
    methods: {
      enable: function () {
        this.$refs.myRadioButton.enable();
      },
      disable: function () {
        this.$refs.myRadioButton.disable();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Focuses the widget.

<template>
  <JqxRadioButton ref="myRadioButton"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    mounted: function () {
      this.$refs.myRadioButton.focus();
    }
  }
</script>

Renders the widget.

<template>
  <JqxRadioButton ref="myRadioButton"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    mounted: function () {
      this.$refs.myRadioButton.render();
    }
  }
</script>

Unchecks the radio button.

<template>
  <div>
    <JqxRadioButton ref="myRadioButton">Radio Button</JqxRadioButton>
    <JqxButton @click="check()">Check</JqxButton>
    <JqxButton @click="uncheck()">Uncheck</JqxButton>
  </div>
</template>

<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxRadioButton,
      JqxButton
    },
    methods: {
      check: function () {
        this.$refs.myRadioButton.check();
      },
      uncheck: function () {
        this.$refs.myRadioButton.uncheck();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Sets or gets the value.

<template>
  <JqxRadioButton ref="myRadioButton"
   >
    Radio Button
  </JqxRadioButton>
</template>

 
<script>
  import JqxRadioButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxradiobutton.vue';
 
  export default {
    components: {
      JqxRadioButton
    },
    mounted: function () {
      const value = this.$refs.myRadioButton.val();
    }
  }
</script>