set filter modal

packages/web/src/forms/FormCheckboxField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
-  import FromCheckboxFieldRaw from './FromCheckboxFieldRaw.svelte';
+  import FormCheckboxFieldRaw from './FormCheckboxFieldRaw.svelte';
 
   export let label;
   export let name;
@@ -18,5 +18,5 @@
   {...templateProps}
   labelProps={disabled ? { disabled: true } : { onClick: () => setFieldValue(name, !$values[name]) }}
 >
-  <FromCheckboxFieldRaw {name} {...$$restProps} {disabled} />
+  <FormCheckboxFieldRaw {name} {...$$restProps} {disabled} />
 </svelte:component>

packages/web/src/forms/FormRadioGroupItem.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+
+  export let name;
+  export let value;
+  export let text;
+
+  const { values, setFieldValue } = getFormContext();
+</script>
+
+<div>
+  <input
+    type="radio"
+    {name}
+    checked={$values[name] == value}
+    on:click={() => setFieldValue(name, value)}
+  />
+  <span on:click={() => setFieldValue(name, value)}>{text}</span>
+</div>

packages/web/src/forms/FormSelectField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
-  import FromSelectFieldRaw from './FromSelectFieldRaw.svelte';
+  import FormSelectFieldRaw from './FormSelectFieldRaw.svelte';
 
   export let label;
   export let name;
@@ -10,5 +10,5 @@
 </script>
 
 <svelte:component this={template} type="select" {label} {...templateProps}>
-  <FromSelectFieldRaw {name} {...$$restProps} />
+  <FormSelectFieldRaw {name} {...$$restProps} />
 </svelte:component>

packages/web/src/forms/FormTextField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getFormContext } from './FormProviderCore.svelte';
-  import FromTextFieldRaw from './FromTextFieldRaw.svelte';
+  import FormTextFieldRaw from './FormTextFieldRaw.svelte';
 
   export let label;
   export let name;
@@ -11,5 +11,5 @@
 </script>
 
 <svelte:component this={template} type="text" {label} {...templateProps}>
-  <FromTextFieldRaw {name} {...$$restProps} {focused} />
+  <FormTextFieldRaw {name} {...$$restProps} {focused} />
 </svelte:component>

packages/web/src/forms/FormTextFieldRaw.svelte

@@ -7,4 +7,4 @@
   const { values, setFieldValue } = getFormContext();
 </script>
 
-<TextField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['value'])} />
+<TextField {...$$restProps} value={$values[name]} on:input={e => setFieldValue(name, e.target['value'])} />

packages/web/src/forms/TextField.svelte

@@ -9,4 +9,4 @@
   if (focused) onMount(() => domEditor.focus());
 </script>
 
-<input type="text" {...$$restProps} bind:value on:change bind:this={domEditor} />
+<input type="text" {...$$restProps} bind:value on:change on:input bind:this={domEditor} />