選択領域にcursor: pointer;をつける

src/components/Input.tsx

@@ -1,3 +1,5 @@
+import styles from '@/styles/components/input.module.scss';
+
 interface Props {
   type: JSX.IntrinsicElements['input']['type'];
   value: JSX.IntrinsicElements['input']['value'];
@@ -18,16 +20,19 @@ export const Input = ({
   id,
 }: Props) => {
   return (
-    <label className={className}>
-      <input
-        type={type}
-        id={id}
-        value={value}
-        name={name ?? value?.toString()}
-        onClick={onClick}
-        defaultChecked={checked}
-      />
-      {value}
-    </label>
+    <div className={className}>
+      <label className={styles.pointer}>
+        <input
+          type={type}
+          id={id}
+          value={value}
+          name={name ?? value?.toString()}
+          onClick={onClick}
+          defaultChecked={checked}
+          className={styles.pointer}
+        />
+        {value}
+      </label>
+    </div>
   );
 };

src/components/Selector.tsx

@@ -32,7 +32,7 @@ export const Selector = ({
               id={item.prefCode.toString()}
               value={item.prefName}
               onClick={changePrefectures}
-              className={styles.label}
+              className={styles.checkbox}
             />
           );
         })}

src/styles/components/input.module.scss

@@ -0,0 +1,3 @@
+.pointer {
+  cursor: pointer;
+}

src/styles/components/selector.module.scss

@@ -21,6 +21,6 @@
   gap: 16px 10px;
 }
 
-.label {
+.checkbox {
   width: 86px;
 }