forward switch ref

src/shared/components/switch/switch.tsx

@@ -1,23 +1,27 @@
 import type { SwitchProps as MantineSwitchProps } from '@mantine/core';
 
 import { Switch as MantineSwitch } from '@mantine/core';
+import { forwardRef, Ref } from 'react';
 
 import styles from './switch.module.css';
 
 type SwitchProps = MantineSwitchProps;
 
-export const Switch = ({ classNames, ...props }: SwitchProps) => {
+export const Switch = forwardRef(
-    return (
+    ({ classNames, ...props }: SwitchProps, ref: Ref<HTMLInputElement>) => {
-        <MantineSwitch
+        return (
-            classNames={{
+            <MantineSwitch
-                input: styles.input,
+                classNames={{
-                root: styles.root,
+                    input: styles.input,
-                thumb: styles.thumb,
+                    root: styles.root,
-                track: styles.track,
+                    thumb: styles.thumb,
-                ...classNames,
+                    track: styles.track,
-            }}
+                    ...classNames,
-            withThumbIndicator={false}
+                }}
-            {...props}
+                ref={ref}
-        />
+                withThumbIndicator={false}
-    );
+                {...props}
-};
+            />
+        );
+    },
+);