How to enforce Select and Boolean in form

[migmanu]

Hey y'all!

i've been using shadcn's form for my website but cant make it work as I expected. String validation works OK and user is always required to fill those. But I cannot make Select and Switch components to work. For the selections I have enums that I tried to build following this link: https://github.com/colinhacks/zod?tab=readme-ov-file#zod-enums

Problem:

• The form does not inform the user that they need to select an option and set consent to true
• The form cannot actually be submitted. Nothing happens on Submit press.

const  reasons = ["to buy", "to sell", "to id"] as const;
const contactReasons = z.enum(reasons);

const  sources = ["opt a", "opt b", "opt c"] as const;
const referralSources = z.enum(sources);

const formSchema = z.object({
	contactReason: z.string().array().nonempty("Mandatory"),
	referralSource: z.string().array().nonempty("Mandatory"),
	dataConsent: z
		.boolean({
		required_error: "Consent is required",
	}),
});

export default function ContactForm() {
	const { toast } = useToast();

	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			dataConsent: false,
		},
	});

	function onSumbit(data: z.infer<typeof formSchema>) {
		console.log("handleSubmit called!");
		toast({
			title: "You submitted the following values:",
			description: (
				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
					<code className="text-white">{JSON.stringify(data, null, 2)}</code>
				</pre>
			),
		});
	}

	return (
		<div className="contact-form bg-background p-2">
			<Form {...form}>
				<form onSubmit={form.handleSubmit(onSumbit)}>
					<div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:grid-rows-5">
						<FormField
							control={form.control}
							name="contactReason"
							render={({ field }) => (
								<FormItem>
									<Select
										onValueChange={field.onChange}
										defaultValue=""
									>
										<FormControl>
											<SelectTrigger>
												<SelectValue placeholder="What do you want to talk with us about?" />
											</SelectTrigger>
										</FormControl>
										<SelectContent>
											{contactReasons.options.map((reason: string) => (
												<SelectItem value={reason} key={reason}>{reason}</SelectItem>
											))}
										</SelectContent>
									</Select>
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name="referralSource"
							render={({ field }) => (
								<FormItem>
									<Select
										onValueChange={field.onChange}
									>
										<FormControl>
											<SelectTrigger>
												<SelectValue placeholder="How did you hear about us?" />
											</SelectTrigger>
										</FormControl>
										<SelectContent>
											{referralSources.options.map((source: string) => (
												<SelectItem value={source} key={source}>{source}</SelectItem>
											))}
										</SelectContent>
									</Select>
								</FormItem>
							)}
						/>
						<hr className="md:row-5 bg-foreground md:col-span-2" />
						<FormField
							control={form.control}
							name="dataConsent"
							render={({ field }) => (
								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
									<div className="space-y-0.5">
										<FormDescription>
											Receive emails about new products, features, and more.
										</FormDescription>
									</div>
									<FormControl>
										<Switch
											checked={field.value}
											onCheckedChange={field.onChange}
										/>
									</FormControl>
								</FormItem>
							)}
						/>
						<Button type="submit">
							Submit
						</Button>
					</div>
				</form>
			</Form>
		</div>
	);
}