React Hook Form

npm install react-hook-form

import { useForm } from 'react-hook-form';

type FormValues = {
    email: string;
    password: string;
};

function LoginForm() {
    const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();

    function onSubmit(data: FormValues) {
        console.log(data);
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('email')} />
            {errors.email && <p>{errors.email.message}</p>}

            <input type="password" {...register('password')} />
            {errors.password && <p>{errors.password.message}</p>}

            <button>Войти</button>
        </form>
    );
}

<input
    {...register('email', {
        required: 'Email обязателен',
        pattern: {
            value: /^\S+@\S+\.\S+$/,
            message: 'Некорректный email',
        },
    })}
/>

<input
    type="password"
    {...register('password', {
        required: 'Пароль обязателен',
        minLength: { value: 8, message: 'Минимум 8 символов' },
    })}
/>

<input
    {...register('username', {
        validate: (value) =>
            value !== 'admin' || 'Имя admin занято',
    })}
/>

// Или функция
validate: (value) => {
    if (value.length < 3) return 'Слишком короткое';
    if (!/^[a-z]+$/.test(value)) return 'Только строчные буквы';
    return true;
}

useForm<FormValues>({
    defaultValues: {
        email: '',
        password: '',
    },
});

const {
    formState: { errors, isSubmitting, isDirty, isValid },
} = useForm<FormValues>();

const { reset } = useForm<FormValues>();

reset();               // к defaultValues
reset({ email: '' });  // к указанным

const { watch } = useForm<FormValues>();
const email = watch('email');
const allValues = watch();

const { setValue, getValues } = useForm<FormValues>();

setValue('email', 'test@example.com');
const current = getValues('email');

import { Controller, useForm } from 'react-hook-form';

<Controller
    name="birthday"
    control={control}
    render={({ field }) => (
        <DatePicker {...field} />
    )}
/>

async function onSubmit(data: FormValues) {
    const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
    });

    if (!res.ok) {
        const errors = await res.json();
        // setError('email', { message: errors.email });
    }
}