Vue UI Components Documentation

Sets or gets the check state.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :checked="true"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets whether the switch button is disabled.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :disabled="true"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets the height.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :height="50"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Determines the jqxSwitchButton's orientation.

'horizontal' 

'vertical'

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :orientation="'vertical'"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets the string displayed when the button is checked.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :onLabel="'On Label'"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets the string displayed when the button is unchecked.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :offLabel="'Off Label'"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets the size of the thumb in percentages.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :thumbSize="'30%'"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :rtl="true"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

Sets or gets the width.

<template>
  <JqxSwitchButton ref="mySwitchButton"
    :width="50"
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    }
  }
</script>

This event is triggered when the switch button is checked.

Code examples

Bind to the checked event of jqxSwitchButton.

<template>
  <JqxSwitchButton ref="mySwitchButton" @checked="onChecked($event)"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    methods: {
      onChecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the switch button's state changes from one state to another.

Code examples

Bind to the change event of jqxSwitchButton.

<template>
  <JqxSwitchButton ref="mySwitchButton" @change="onChange($event)"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the switch button is unchecked.

Code examples

Bind to the unchecked event of jqxSwitchButton.

<template>
  <JqxSwitchButton ref="mySwitchButton" @unchecked="onUnchecked($event)"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    methods: {
      onUnchecked: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Checks the button.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      this.$refs.mySwitchButton.check();
    }
  }
</script>

Disables the switch button.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      this.$refs.mySwitchButton.disable();
    }
  }
</script>

Enables the switch button.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      this.$refs.mySwitchButton.enable();
    }
  }
</script>

Toggles the check state. This method is automatically called when the user clicks the switch button.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      this.$refs.mySwitchButton.toggle();
    }
  }
</script>

Unchecks the button.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      this.$refs.mySwitchButton.uncheck();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxSwitchButton ref="mySwitchButton"
   
  />
</template>
 
<script>
  import JqxSwitchButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxswitchbutton.vue';
 
  export default {
    components: {
      JqxSwitchButton
    },
    mounted: function () {
      const value = this.$refs.mySwitchButton.val();
    }
  }
</script>