Right to left in Vue Check box component

30 May 20241 minute to read

CheckBox component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in CheckBox component.

Composition API (~/src/App.vue)

<template>
<ejs-checkbox label='Default' enableRtl=true></ejs-checkbox>
</template>

<script setup>

import { CheckBoxComponent as EjsCheckbox } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);


export default {}
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-checkbox-wrapper {
  margin-top: 18px;
}
</style>

Options API (~/src/App.vue)

<template>
<ejs-checkbox label='Default' enableRtl=true></ejs-checkbox>
</template>

<script>

import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-checkbox":CheckBoxComponent,
},
}
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

.e-checkbox-wrapper {
  margin-top: 18px;
}
</style>