2 files changed, 41 insertions, 20 deletions
diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte
index 1e06a7c..cd5120a 100644
--- a/code/app/src/routes/book/badges/+page.svelte
+++ b/code/app/src/routes/book/badges/+page.svelte
@@ -12,7 +12,7 @@
     <Badge type="yellow" text="yellow" />
     <Badge size="large" text="large" />
     <Badge text="with dot" withDot type="blue" />
-    <Badge text="removable" removeable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} />
+    <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)} />
     <Badge text="with dot" size="large" withDot type="blue" />
-    <Badge text="removable" removeable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} />
+    <Badge text="removable" removable size="large" id="badge-2" uppercase on:remove={(e) => alert("removed " + e.detail.id)} />
 </section>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
index a693f69..e4d19ff 100644
--- a/code/app/src/routes/book/inputs/+page.svelte
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -1,48 +1,69 @@
 <script lang="ts">
-    import Input from "$lib/components/input.svelte";
+    import { TextArea, Input, Combobox } from "$lib/components";
     import { DatabaseIcon } from "$lib/components/icons";
+
+    let value;
+    let i = 0;
+    let options = [];
+    let tempOptions = [];
+    while (i < 101) {
+        tempOptions.push({
+            id: crypto.randomUUID(),
+            name: "Option " + i,
+        });
+        options = tempOptions;
+        i++;
+    }
+
+    async function add({ name }) {
+        const copy = options;
+        copy.push({
+            id: crypto.randomUUID(),
+            name: name,
+        });
+        options = copy;
+    }
 </script>
 
 <section>
+    <h2>Combobox</h2>
+    <Combobox {options} label="Wiii" multiple createable on_create_async={add} />
+</section>
+
+<section>
     <h2>Default</h2>
-    <Input label="Input me" placeholder="Hello" />
+    <Input label="Input me" placeholder="Hello" bind:value />
 </section>
 
 <section>
     <h2>With icon</h2>
-    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} />
+    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value />
 </section>
 
 <section>
     <h2>With corner hint</h2>
-    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" />
+    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value />
 </section>
 
 <section>
     <h2>Disabled</h2>
-    <Input label="No" placeholder="Sorry" disabled />
+    <Input label="No" placeholder="Sorry" disabled bind:value />
 </section>
 
 <section>
     <h2>Errored</h2>
-    <Input
-        label="No"
-        placeholder="Sorry"
-        errorText="That's not right"
-        icon={DatabaseIcon}
-    />
+    <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon} />
 </section>
 
 <section>
     <h2>Help</h2>
-    <Input label="Go ahead" placeholder="Write here" helpText="Write above" />
+    <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value />
 </section>
 <section>
     <h2>Addon</h2>
-    <Input
-        label="Go ahead"
-        placeholder="Write here"
-        helpText="Write above"
-        addon="To the right"
-    />
+    <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right" />
+</section>
+<section>
+    <h2>Textarea</h2>
+    <TextArea bind:value errorText="oh no" label="Hi" />
 </section>