pulled out the selection options in the selectInput field.

src/lib/components/inputfields/SelectInput.svelte

@@ -21,9 +21,7 @@
 	aria-invalid={$errors[field.name] ? 'true' : undefined}
 	{...constraints[field.name]}
 >
-	<option value="apple">Apple</option>
+	{#each field.options as option (option.value)}
-	<option value="banana">Banana</option>
+		<option value={option.value}>{option.label}</option>
-	<option value="coconut">Coconut</option>
+	{/each}
-	<option value="strawberry">Strawberry</option>
-	<option value="mango">Mango</option>
 </select>

src/lib/components/inputfields/TextInput.svelte

@@ -10,6 +10,8 @@
 	export let childInput;
 
 	const { form, errors, field, constraints } = childInput;
+
+	$: console.log({ field });
 </script>
 
 <input

src/lib/types/UserSchema.ts

@@ -33,7 +33,7 @@ export const UserSchema = z.object({
     email: z.string().email(validationMessages.email.isEmail),
     about: z.string().max(500, validationMessages.about.maxLength),
     age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),
-    favoriteFood: z.enum(['apple', 'banana', 'coconut', 'strawberry', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),
+    favoriteFood: z.enum(['apple', 'banana', 'coconut', 'peach', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),
     slider: z.number().min(0, validationMessages.slider.min).max(100, validationMessages.slider.max),
     toggle: z.boolean().refine(value => typeof value === 'boolean', validationMessages.toggle.isBoolean),
 }).required({

src/routes/composer/form/+page.svelte

@@ -24,37 +24,39 @@
 							{
 								name: 'name',
 								type: 'text',
-								placeholder: '',
 								title: 'What is your name?',
 								description: 'Please enter your name'
 							},
 							{
 								name: 'email',
 								type: 'email',
-								placeholder: '',
 								title: 'What is your email?',
 								description: 'Please enter your email'
 							},
 							{
 								name: 'about',
 								type: 'textarea',
-								placeholder: '',
 								title: 'Can you tell us about yourself?',
 								description: 'Tell us about yourself'
 							},
 							{
 								name: 'age',
 								type: 'number',
-								placeholder: '',
 								title: 'How old are you?',
 								description: 'Please enter your age'
 							},
 							{
 								name: 'favoriteFood',
 								type: 'select',
-								placeholder: '',
 								title: 'What is your favorite food?',
-								description: 'Please select your favorite food'
+								description: 'Please select your favorite food',
+								options: [
+									{ value: 'apple', label: 'Apple' },
+									{ value: 'banana', label: 'Banana' },
+									{ value: 'peach', label: 'Peach' },
+									{ value: 'coconut', label: 'Coconut' },
+									{ value: 'mango', label: 'Mango' }
+								]
 							}
 						],
 						validators: UserSchema