Checkbox

import { Button } from "@ngrok/mantle/button";
import { Label } from "@ngrok/mantle/label";
import { Checkbox } from "@ngrok/mantle/checkbox";
import { useForm } from "@tanstack/react-form";
import { z } from "zod";
import { useSubmit } from "react-router";

const formSchema = z.object({
	acceptedTermsAndConditions: z
		.boolean()
		.refine((value) => value, "You must accept the terms and conditions."),
});

type FormValues = z.infer<typeof formSchema>;

function FormExample() {
	const submit = useSubmit();
	const form = useForm({
		defaultValues: {
			acceptedTermsAndConditions: false,
		} satisfies FormValues as FormValues,
		validators: {
			onSubmit: formSchema,
		},
		onSubmit: ({ value }) => {
			// Handle form submission here
			submit(value, {
				method: "post",
			});
		},
	});

	return (
		<form
			className="space-y-4"
			onSubmit={(event) => {
				event.preventDefault();
				event.stopPropagation();
				void form.handleSubmit();
			}}
		>
			<div className="space-y-1">
				<form.Field name="acceptedTermsAndConditions">
					{(field) => (
						<Label htmlFor={field.name} className="flex items-center gap-2">
							<Checkbox
								name={field.name}
								id={field.name}
								checked={field.state.value}
								onBlur={field.handleBlur}
								onChange={(event) => field.handleChange(event.target.checked)}
								validation={field.state.meta.errors.length > 0 && "error"}
							/>
							Accept terms and conditions
						</Label>
					)}
				</form.Field>
				<form.Field name="acceptedTermsAndConditions">
					{(field) =>
						field.state.meta.errors.map((error) => (
							<p
								key={error?.message}
								className="text-sm leading-4 text-danger-600"
							>
								{error?.message}
							</p>
						))
					}
				</form.Field>
			</div>
			<form.Subscribe selector={(state) => state.isDirty}>
				{(isDirty) => (
					<Button type="submit" appearance="filled" disabled={!isDirty}>
						Submit
					</Button>
				)}
			</form.Subscribe>
		</form>
	);
}