diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index cd1c04b..343769f 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -105,6 +105,16 @@
 			handleNext();
 		}
 	}
+	let childInput;
+	$: {
+		childInput = {
+			form,
+			errors,
+			validate,
+			field: fields[$state.context.currentField],
+			constraints
+		};
+	}
 </script>
 
 <div class="p-6">
@@ -124,61 +134,19 @@
 				</label>
 			{/if}
 			{#if fields[$state.context.currentField].type === 'text'}
-				<TextInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<TextInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'email'}
-				<TextInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<TextInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'textarea'}
-				<TextAreaInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<TextAreaInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'select'}
-				<SelectInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<SelectInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'slider'}
-				<SliderInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<SliderInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'toggle'}
-				<ToggleInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<ToggleInput {childInput} />
 			{:else if fields[$state.context.currentField].type === 'number'}
-				<NumberInput
-					{form}
-					{errors}
-					{validate}
-					field={fields[$state.context.currentField]}
-					{constraints}
-				/>
+				<NumberInput {childInput} />
 			{/if}
 		</div>
 		{#if $state.matches('submitting')}
diff --git a/src/lib/components/refactor/inputfields/NumberInput.svelte b/src/lib/components/refactor/inputfields/NumberInput.svelte
index 249bf99..8373447 100644
--- a/src/lib/components/refactor/inputfields/NumberInput.svelte
+++ b/src/lib/components/refactor/inputfields/NumberInput.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
+
 	let inputElement;
 
+	export let childInput;
+
+	const { form, errors, field, constraints } = childInput;
+
 	onMount(() => {
 		inputElement.focus();
 	});
-
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
 </script>
 
 <input
diff --git a/src/lib/components/refactor/inputfields/SelectInput.svelte b/src/lib/components/refactor/inputfields/SelectInput.svelte
index 5be1e7a..66d6a06 100644
--- a/src/lib/components/refactor/inputfields/SelectInput.svelte
+++ b/src/lib/components/refactor/inputfields/SelectInput.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
+	import { onMount } from 'svelte';
 
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
+	let inputElement;
 
-	const state = writable('');
+	export let childInput;
+
+	const { form, errors, field, constraints } = childInput;
+
+	onMount(() => {
+		inputElement.focus();
+	});
 </script>
 
 <select
 	name={field.name}
+	bind:this={inputElement}
 	class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
 	bind:value={$form[field.name]}
 	aria-invalid={$errors[field.name] ? 'true' : undefined}
diff --git a/src/lib/components/refactor/inputfields/SliderInput.svelte b/src/lib/components/refactor/inputfields/SliderInput.svelte
index fb5a4b6..85d879c 100644
--- a/src/lib/components/refactor/inputfields/SliderInput.svelte
+++ b/src/lib/components/refactor/inputfields/SliderInput.svelte
@@ -2,11 +2,9 @@
 	import { writable } from 'svelte/store';
 	import { RangeSlider } from '@skeletonlabs/skeleton';
 
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
+	export let childInput;
+
+	const { form, field, constraints } = childInput;
 
 	const state = writable(0);
 </script>
diff --git a/src/lib/components/refactor/inputfields/TextAreaInput.svelte b/src/lib/components/refactor/inputfields/TextAreaInput.svelte
index ba19419..c499675 100644
--- a/src/lib/components/refactor/inputfields/TextAreaInput.svelte
+++ b/src/lib/components/refactor/inputfields/TextAreaInput.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
 
 	let inputElement;
 
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
+	export let childInput;
+
+	const { form, errors, field, constraints } = childInput;
 
 	onMount(() => {
 		inputElement.focus();
diff --git a/src/lib/components/refactor/inputfields/TextInput.svelte b/src/lib/components/refactor/inputfields/TextInput.svelte
index 8415527..885e4d0 100644
--- a/src/lib/components/refactor/inputfields/TextInput.svelte
+++ b/src/lib/components/refactor/inputfields/TextInput.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
-	import { createMachine, interpret } from 'xstate';
-	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
+
 	let inputElement;
 
 	onMount(() => {
 		inputElement.focus();
 	});
 
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
+	export let childInput;
+
+	const { form, errors, validate, field, constraints } = childInput;
 </script>
 
 <input
diff --git a/src/lib/components/refactor/inputfields/ToggleInput.svelte b/src/lib/components/refactor/inputfields/ToggleInput.svelte
index aeb6c8e..bd7b49b 100644
--- a/src/lib/components/refactor/inputfields/ToggleInput.svelte
+++ b/src/lib/components/refactor/inputfields/ToggleInput.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SlideToggle } from '@skeletonlabs/skeleton';
 
-	export let form;
-	export let errors;
-	export let validate;
-	export let field;
-	export let constraints;
+	export let childInput;
+
+	const { form, field, constraints } = childInput;
 </script>
 
 <SlideToggle name={field.name} bind:checked={$form[field.name]} {...constraints[field.name]} />