owlboard-svelte/src/lib/islands/input-island-form.svelte

<script lang="ts">
  import Island from '$lib/islands/island.svelte';
  export let variables = {
    title: 'Uninitialised',
    action: '/',
    placeholder: 'Uninitialised',
    queryName: 'uninitiailsed'
  };
</script>

<Island {variables}>
  <form action={variables.action}>
    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
    <br />
    <button type="submit">Submit</button>
  </form>
</Island>

<style>
  .form-input {
    width: 75%;
    height: 32px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 50px;
    border: none;
    text-align: center;
    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: var(--box-shadow);
  }
  button {
    width: 50%;
    margin-bottom: 5px;
    margin-top: 5px;
    border: none;
    border-radius: 20px;
    padding: 5px;
    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--island-button-color);
    color: var(--island-link-color);
    box-shadow: var(--box-shadow);
  }
</style>