diff --git a/src/lib/islands/input-island-onclick.svelte b/src/lib/islands/input-island-onclick.svelte
new file mode 100644
index 0000000..3a2d7e2
--- /dev/null
+++ b/src/lib/islands/input-island-onclick.svelte
@@ -0,0 +1,45 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Uninitialised",
+        onclick: "/",
+        placeholder: "Uninitialised",
+        queryName: "uninitiailsed"
+    };
+</script>
+
+<Island {variables}>
+<form>
+    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
+    <br>
+    <button on:click={variables.onclick}>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;
+    }
+    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(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>
\ No newline at end of file