Update NewItemForm.vue

src/components/ItemComponents/NewItemForm.vue

@@ -66,28 +66,32 @@
       </div>
     </div>
 
-    <!-- Select Group -->
     <div class="mb-6">
       <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-        id="selectCommunityLabel"
-        >Grupper</label
-      >
-      <select
-        v-model="v$.item.selectGroup.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+        class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+        >Grupper</label>
+      <div
+          class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700"
       >
-        <option class="text-gray-400" value="" disabled selected>
-          Velg en gruppe
-        </option>
-        <option
-          v-for="group in groups"
-          :key="group"
-          class="text-gray-900 text-sm"
-        >
-          {{ group }}
-        </option>
-      </select>
+        <ul class="py-1" aria-labelledby="dropdownDefault">
+          <li>
+            <div class="form-check" v-for="group in groups" :key="group">
+              <input
+
+                  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+                  type="checkbox"
+                  :value="group.communityId"
+                  @change="onChangeGroup($event)"
+              >
+              <label class="form-check-label inline-block text-gray-800">
+                {{ group.name }}
+              </label>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <label class="text-error text-sm block">{{ groupErrorMessage }}</label>
+    </div>
 
       <!-- error message for select box -->
       <div