<script>
  import { Form } from "svelte-formik";

  const { form, handleChange, handleSubmit } = new Form({
    initialValues: { title: "", lastName: "", firstName: "" },
    onSubmit: values => {
      alert(JSON.stringify(values));
    }
  });
</script>

<form on:submit={handleSubmit}>
  <label for="title">title</label>
  <select
    id="title"
    name="title"
    on:change={handleChange}
    bind:value={$form.title}>
    <option></option>
    <option>Mr.</option>
    <option>Mrs.</option>
    <option>Mx.</option>
  </select>

  <label for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    on:change={handleChange}
    bind:value={$form.lastName}
  />

  <label for="firstName">First Name</label>
  <input
    id="firstName"
    name="firstName"
    on:change={handleChange}
    bind:value={$form.firstName}
  />

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