How to use the svelte-forms-lib with multiple select or radio buttons

[ntegral]

I have read through the initial documentation that you have posted for this library. Do you have any documentation on how to use this library with group radio buttons or multiple selections

Thanks

[larrybotha]

@ntegral something like the following: https://codesandbox.io/s/heuristic-boyd-7vsw7

<script>
  import { createForm } from "svelte-forms-lib";

  const { form, handleChange, handleSubmit, updateField } = createForm({
    initialValues: {
      multiSelect: "",
      radioSelect: "",
    },
    onSubmit: values => {
      alert(JSON.stringify(values));
    }
  });

  const selectOptions = ['one', 'two', 'three']

  function handleSelectChange(event) {
    const value = [...event.target.selectedOptions].map(
      option =>  option.value
    )
    
    updateField("multiSelect", value)
  }
</script>

  <form on:submit|preventDefault={handleSubmit}>
    <div>
      <div>
        <label for="radioSelect">radio select</label>
      </div>
      {#each selectOptions as o}
      <div>
        <input 
          type="radio"
          name="radioSelect"
          id={`radio-${o}`}
          value={o}
          on:change={handleChange}
          checked={$form.radioSelect == o}
        >
        <label for={`radio-${o}`}>{o}</label>
      </div>
      {/each}
    </div>

    <br />
    <div>
      <div>
        <label for="multiSelect">multi select</label>
      </div>
      <select 
        name="multiSelect"
        id="multiSelect"
        on:input={handleSelectChange}
        multiple
        size={selectOptions.length}
      >
          {#each selectOptions as o}
          <option value={o}>{o}</option>
          {/each}
      </select>
    </div>

    <button type="submit">Submit</button>
  </form>

Note you'd need to manually handle the multiple select, as the value attribute doesn't contain all the selected values