Created fancy customizable input field.

src/lib/Field.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let label = '';
+	export let insrustions = '';
+	export let style = '';
+	export let value;
+	export let placeholder;
+	export let type = 'text';
+
+	function handleInput(e) {
+		value = type.match(/^(number|range)$/) ? +e.target.value : e.target.value;
+	}
+</script>
+
+<div {style}>
+	<label>
+		{#if label}
+			<span>
+				{label}
+			</span>
+			<br />
+		{/if}
+		{#if insrustions}
+			<span class="instructions">
+				{insrustions}
+			</span>
+			<br />
+		{/if}
+		<input on:input={handleInput} {type} {value} {placeholder} />
+	</label>
+</div>
+
+<style>
+	div {
+		margin-bottom: 1rem;
+	}
+	.instructions {
+		opacity: 0.7;
+		font-size: var(--instructionsFontSize, 14px);
+	}
+</style>

src/routes/index.svelte

@@ -1,5 +1,6 @@
 <script>
 	import SearchFilter from '$lib/SearchFilter.svelte';
+	import Field from '$lib/Field.svelte';
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
@@ -9,6 +10,10 @@
 
 <h1>Welcome to Level Up UI {search}</h1>
 
+<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
+
+<Field value={0} label="Number" type="number" />
+
 <SearchFilter {items} bind:search />
 
 <!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">