diff --git a/examples/vanilla-extract-react/src/components/Switch/switch.types.ts b/examples/vanilla-extract-react/src/components/Switch/switch.types.ts
new file mode 100644
index 0000000..633e678
--- /dev/null
+++ b/examples/vanilla-extract-react/src/components/Switch/switch.types.ts
@@ -0,0 +1,5 @@
+export interface ISwitchProps {
+  status: boolean;
+  onChange: React.Dispatch<React.SetStateAction<boolean>>;
+  isDisabled?: boolean;
+}
\ No newline at end of file
diff --git a/lib/src/components/Switch/Switch.tsx b/lib/src/components/Switch/Switch.tsx
index 5e23d5c..b1214bc 100644
--- a/lib/src/components/Switch/Switch.tsx
+++ b/lib/src/components/Switch/Switch.tsx
@@ -2,15 +2,20 @@ import { slider, switchInputStyle, switchLayout } from "./switch.css";
 import { ISwitchProps } from "./switch.types";
 import "./switch-global-styles.css";
 
+type SwitchProps = ISwitchProps & JSX.IntrinsicElements["input"];
+
 export const Switch = ({
   status,
   onChange,
   isDisabled = false,
-}: ISwitchProps) => {
+  className = "",
+  ...nativeProps
+}: SwitchProps) => {
   return (
     <label className={switchLayout}>
       <input
-        className={switchInputStyle}
+        {...nativeProps}
+        className={`${switchInputStyle} ${className}`}
         type="checkbox"
         checked={status}
         onChange={(e) => onChange(e.target.checked)}
diff --git a/lib/src/components/Switch/switch.types.ts b/lib/src/components/Switch/switch.types.ts
index 633e678..3585921 100644
--- a/lib/src/components/Switch/switch.types.ts
+++ b/lib/src/components/Switch/switch.types.ts
@@ -2,4 +2,5 @@ export interface ISwitchProps {
   status: boolean;
   onChange: React.Dispatch<React.SetStateAction<boolean>>;
   isDisabled?: boolean;
+  className?: string;
 }
\ No newline at end of file