Form Checkbox

import { type AnyFormApi, type DeepKeys, useField } from "@tanstack/react-form";
import type { ComponentProps, ReactNode } from "react";

import { cn } from "@/lib/utils";

import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import { FormError } from "@/components/ui/forms/form-error";
import { type GetFormData } from "@/components/ui/forms/helpers";

export type FormCheckboxProps<TForm extends AnyFormApi> = Omit<ComponentProps<typeof Checkbox>, "name" | "form"> & {
    label?: ReactNode;
    description?: ReactNode;
    form: TForm;
    name: DeepKeys<GetFormData<TForm>>;
    containerClassName?: string;
};

export const FormCheckbox = <TForm extends AnyFormApi>({
    label,
    description,
    form,
    name,
    className,
    containerClassName,
    ...rest
}: FormCheckboxProps<TForm>) => {
    const field = useField({
        form,
        name,
    });

    const errors = field.state.meta.errors[0];
    const error = typeof errors === "object" ? errors.message : errors;

    return (
        <Field data-invalid={error != undefined} className={cn("gap-1.5", containerClassName)}>
            <div className="flex items-start space-x-3">
                <Checkbox
                    id={field.name}
                    name={field.name}
                    checked={field.state.value as boolean}
                    onCheckedChange={field.handleChange}
                    onBlur={field.handleBlur}
                    aria-invalid={error != undefined}
                    className={cn("mt-1", className)}
                    {...rest}
                />
                <div className="space-y-1 leading-none">
                    {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
                    {description && <p className="text-muted-foreground text-sm">{description}</p>}
                </div>
            </div>
            <FormError form={form} name={name} className="mt-0.5" />
        </Field>
    );
};

import { type AnyFormApi, type DeepKeys, useField } from "@tanstack/react-form";
import type { InputHTMLAttributes } from "react";

import { cn } from "@/lib/utils";

import { type GetFormData } from "@/components/ui/forms/helpers";

export type FormErrorProps<TForm extends AnyFormApi> = Omit<
    InputHTMLAttributes<HTMLParagraphElement>,
    "name" | "form"
> & {
    form: TForm;
    name: DeepKeys<GetFormData<TForm>>;
};

export const FormError = <TForm extends AnyFormApi>({ form, name = "", className, ...rest }: FormErrorProps<TForm>) => {
    const field = useField({
        form,
        name,
    });

    const errors = field.state.meta.errors[0];
    const error = typeof errors === "object" ? errors.message : errors;

    return (
        <>
            {error && (
                <p {...rest} className={cn("text-destructive text-sm", className)}>
                    {error}
                </p>
            )}
        </>
    );
};

import { type AnyFormApi, type DeepKeys, type FormApi } from "@tanstack/react-form";

export type GetFormData<TForm> =
    TForm extends FormApi<infer TData, any, any, any, any, any, any, any, any, any, any, any> ? TData : never;

export const setFieldError = <TForm extends AnyFormApi>(
    form: TForm,
    field: DeepKeys<GetFormData<TForm>>,
    error: string,
) => {
    form.setFieldMeta(field, (prev) => ({
        ...prev,
        errorMap: {
            ...prev.errorMap,
            onSubmit: error,
        },
    }));
};

export const clearFormErrors = <TForm extends AnyFormApi>(form: TForm) => {
    form.setErrorMap({ onDynamic: { fields: {} } });
};