diff --git a/docs/components/toggle.md b/docs/components/toggle.md
index dc31732a..5760ede2 100644
--- a/docs/components/toggle.md
+++ b/docs/components/toggle.md
@@ -4,6 +4,7 @@
import FwbToggleExampleColors from './toggle/examples/FwbToggleExampleColors.vue'
import FwbToggleExampleDisabled from './toggle/examples/FwbToggleExampleDisabled.vue'
import FwbToggleExampleSize from './toggle/examples/FwbToggleExampleSize.vue'
+ import FwbToggleExampleOrder from './toggle/examples/FwbToggleExampleOrder.vue'
# Vue Toggle - Flowbite
@@ -94,3 +95,17 @@ const toggle = ref(false)
import { FwbToggle } from 'flowbite-vue'
```
+
+## Label position
+
+
+```vue
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/components/toggle/examples/FwbToggleExampleOrder.vue b/docs/components/toggle/examples/FwbToggleExampleOrder.vue
new file mode 100644
index 00000000..938b74ca
--- /dev/null
+++ b/docs/components/toggle/examples/FwbToggleExampleOrder.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/FwbToggle/FwbToggle.vue b/src/components/FwbToggle/FwbToggle.vue
index 64e666d7..ee542a99 100644
--- a/src/components/FwbToggle/FwbToggle.vue
+++ b/src/components/FwbToggle/FwbToggle.vue
@@ -1,5 +1,5 @@
-
@@ -22,6 +22,7 @@ interface ToggleProps {
label?: string;
modelValue?: boolean;
size?: InputSize;
+ reverse?: boolean;
}
const props = withDefaults(defineProps(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps(), {
label: '',
modelValue: false,
size: 'md',
+ reverse: false,
})
const emit = defineEmits(['update:modelValue'])
@@ -48,5 +50,7 @@ const {
toggleClasses,
toggleColor,
toggleBallClasses,
+ toggleBallOrder,
+ labelOrder,
} = useToggleClasses(toRefs(props))
diff --git a/src/components/FwbToggle/composables/useToggleClasses.ts b/src/components/FwbToggle/composables/useToggleClasses.ts
index 4bf91b3f..c063b841 100644
--- a/src/components/FwbToggle/composables/useToggleClasses.ts
+++ b/src/components/FwbToggle/composables/useToggleClasses.ts
@@ -3,13 +3,25 @@ import type { InputSize } from '@/components/FwbInput/types'
// Toggle Background
const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
-const defaultToggleBackgroundClasses = 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
-const defaultToggleBallClasses = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300'
+const defaultToggleBackgroundClasses = 'relative bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600'
+const defaultToggleBallClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300'
+
+const labelOrderClasses: Record = {
+ direct: '',
+ reverse: 'flex-row-reverse',
+}
+
+const toggleBallOrderClasses: Record = {
+ direct: 'ms-3',
+ reverse: 'me-3',
+}
+
const toggleSizeClasses: Record = {
- lg: 'w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6',
- md: 'w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5',
- sm: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+ lg: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6',
+ md: 'w-11 h-6 after:top-[2px] after:start-[2px] after:h-5 after:w-5',
+ sm: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4',
}
+
const toggleColorClasses: Record = {
red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
@@ -22,6 +34,7 @@ const toggleColorClasses: Record = {
export type UseToggleClassesProps = {
size: Ref
color: Ref
+ reverse: Ref
}
export function useToggleClasses (props: UseToggleClassesProps) {
@@ -30,6 +43,8 @@ export function useToggleClasses (props: UseToggleClassesProps) {
const toggleSize = computed(() => toggleSizeClasses[props.size.value])
const toggleColor = computed(() => toggleColorClasses[props.color.value])
const toggleBallClasses = computed(() => defaultToggleBallClasses)
+ const toggleBallOrder = computed(() => toggleBallOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
+ const labelOrder = computed(() => labelOrderClasses[props.reverse.value ? 'reverse' : 'direct'])
return {
labelClasses,
@@ -37,5 +52,7 @@ export function useToggleClasses (props: UseToggleClassesProps) {
toggleClasses,
toggleColor,
toggleBallClasses,
+ toggleBallOrder,
+ labelOrder,
}
}