diff --git a/src/lib/components/toggle/ContentLeft.svelte b/src/lib/components/toggle/ContentLeft.svelte
index 18b70b7..730aaaf 100644
--- a/src/lib/components/toggle/ContentLeft.svelte
+++ b/src/lib/components/toggle/ContentLeft.svelte
@@ -10,7 +10,7 @@
 	const name: string = getContext('toggle-name');
 	const toggleOff: () => void = getContext('toggle-off');
 
-	const defaultClass = 'mr-3 cursor-pointer';
+	const defaultClass = 'mr-3 cursor-pointer stwui-toggle-content-left';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/toggle/ContentRight.svelte b/src/lib/components/toggle/ContentRight.svelte
index 115e015..78160e8 100644
--- a/src/lib/components/toggle/ContentRight.svelte
+++ b/src/lib/components/toggle/ContentRight.svelte
@@ -10,7 +10,7 @@
 	const name: string = getContext('toggle-name');
 	const toggleOn: () => void = getContext('toggle-on');
 
-	const defaultClass = 'ml-3 cursor-pointer';
+	const defaultClass = 'ml-3 cursor-pointer stwui-toggle-content-right';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/toggle/Description.svelte b/src/lib/components/toggle/Description.svelte
index 78bcb0e..32861be 100644
--- a/src/lib/components/toggle/Description.svelte
+++ b/src/lib/components/toggle/Description.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-sm text-secondary-content';
+	const defaultClass = 'text-sm text-secondary-content stwui-toggle-description';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/toggle/Label.svelte b/src/lib/components/toggle/Label.svelte
index 38e81ca..e373ab6 100644
--- a/src/lib/components/toggle/Label.svelte
+++ b/src/lib/components/toggle/Label.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-sm font-medium text-content';
+	const defaultClass = 'text-sm font-medium text-content stwui-toggle-label';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/toggle/Toggle.svelte b/src/lib/components/toggle/Toggle.svelte
index 11c235d..df64caa 100644
--- a/src/lib/components/toggle/Toggle.svelte
+++ b/src/lib/components/toggle/Toggle.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import { slide } from 'svelte/transition';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	import { twMerge } from 'tailwind-merge';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let name: string;
 	export let on = false;
@@ -26,37 +32,51 @@
 		on = false;
 	}
 
+	const defaultClass = 'stwui-toggle-wrapper flex flex-col';
+	$: finalClass = twMerge(defaultClass, $$props.class);
+
 	setContext('toggle-name', name);
 	setContext('toggle-on', toggleOn);
 	setContext('toggle-off', toggleOff);
 </script>
 
-<div class="flex flex-col">
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<div class="flex items-center">
 		<slot name="content-left" />
 		<div
-			class="border border-border relative inline-flex flex-shrink-0 h-[1.6rem] rounded-full cursor-pointer outline-none focus:outline-none {width}"
+			class="border relative inline-flex flex-shrink-0 h-[1.6rem] rounded-full cursor-pointer outline-none focus:outline-none {width}"
+			class:border-border={!on}
+			class:border-primary={on}
 		>
 			<button
 				aria-label="toggle"
 				on:click={toggle}
 				type="button"
-				class="relative inline-flex items-center justify-between flex-shrink-0 h-full w-full border-2 border-transparent rounded-full cursor-pointer ease-in-out outline-none focus:outline-none"
+				class="stwui-toggle relative inline-flex items-center justify-between flex-shrink-0 h-full w-full border-2 border-transparent rounded-full cursor-pointer ease-in-out outline-none focus:outline-none"
 				class:bg-default={!on}
 				class:bg-primary={on}
 			>
 				<span
 					aria-hidden="true"
-					class="relative z-10 inline-block bg-surface h-5 w-5 rounded-full shadow transform transition-transform ease-in-out duration-150 border border-border {translate}"
+					class="stwui-toggle-dongle relative z-10 inline-block bg-surface h-5 w-5 rounded-full shadow transform transition-transform ease-in-out duration-150 border border-border {translate}"
 				/>
 				<input type="checkbox" class="hidden" {name} id={name} checked={on} />
 				{#if $$slots['left-icon']}
-					<span class="text-sm absolute left-0.5 flex items-center justify-center h-4 w-4">
+					<span
+						class="text-sm absolute left-0.5 flex items-center justify-center h-4 w-4 stwui-toggle-left-icon-wrapper"
+					>
 						<slot name="left-icon" />
 					</span>
 				{/if}
 				{#if $$slots['right-icon']}
-					<span class="text-sm absolute right-0.5 flex items-center justify-center h-4 w-4">
+					<span
+						class="text-sm absolute right-0.5 flex items-center justify-center h-4 w-4 stwui-toggle-right-con-wrapper"
+					>
 						<slot name="right-icon" />
 					</span>
 				{/if}
@@ -65,6 +85,12 @@
 		<slot name="content-right" />
 	</div>
 	{#if error}
-		<p transition:slide|local class="!mt-2 text-sm text-danger" id="{name}-error">{error}</p>
+		<p
+			transition:slide|local
+			class="!mt-2 text-sm text-danger stwui-toggle-error"
+			id="{name}-error"
+		>
+			{error}
+		</p>
 	{/if}
 </div>