Add UI functionality of questionnaire builder

src/components/Form/Checkbox.svelte

@@ -3,6 +3,7 @@
   export let value;
   export let checked;
   export let name;
+  export let isEditable = false;
 </script>
 
 <label class="inline-flex items-center">
@@ -11,7 +12,19 @@
     class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
     {name}
     {value}
+    disabled={isEditable}
     bind:checked
   />
-  <span class="ml-2">{label}</span>
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>

src/components/Form/RadioItem.svelte

@@ -3,9 +3,28 @@
   export let value;
   export let checked;
   export let name;
+  export let isEditable = false;
 </script>
 
 <label class="inline-flex items-center">
-  <input class="form-radio" type="radio" {checked} {name} {value} />
-  <span class="ml-2">{label}</span>
+  <input
+    class="form-radio"
+    type="radio"
+    {checked}
+    {name}
+    {value}
+    disabled={isEditable}
+  />
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>

src/components/Form/Select.svelte

@@ -1,12 +1,11 @@
 <script>
   export let label;
-  export let placeholder;
   export let value;
   export let options = [];
 </script>
 
 <label class="block">
-  <span class="text-gray-700">{label}</span>
+  {#if label} <span class="text-gray-700">{label}</span> {/if}
   <select bind:value class="form-select block w-full mt-1">
     {#each options as option}
       <option value={option.id}>

src/components/Form/TextField.svelte

@@ -5,10 +5,10 @@
   export let onKeyDown;
 </script>
 
-<label class="block">
-  {#if label}<span class="text-gray-700">{label}</span>{/if}
+<label class="block mb-3">
+  {#if label}<h4 class="m-0">{label}</h4>{/if}
   <input
-    class="form-input p-4 mt-1 block w-full rounded-t-lg bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
     type="text"
     on:keydown={onKeyDown}
     {placeholder}