bandolier-website/client/components/FormField.svelte

<script>
  export let form = {};
  export let field = "";
  export let label=field;
  /* Use for checkbox where the check needs to be "inline" with the label. */
  export let inline = false;
</script>

{#if form}
  {#if inline}
    {#if !form._valid && form._errors && form._errors[field]}
      {#each form._errors[field] as error, i}
        <error data-testid="{field}-error-{i}">
        { error }
        </error>
      {/each}
    {/if}
    <label for={ field }>
      <slot></slot> { label }
    </label>
  {:else}
    <label for={ field }>{ label }</label>
    {#if !form._valid && form._errors && form._errors[field]}
      {#each form._errors[field] as error, i}
        <error data-testid="{field}-error-{i}">
        { error }
        </error>
      {/each}
    {/if}
    <slot></slot>
  {/if}
{:else}
  <callout class="error">
    No form property. Check your code.
  </callout>
{/if}