Initializing useForm Hook for Basic Form Handling

Demonstrate initializing the useForm hook in TanStack Form to manage a simple login form including basic fields such as email and password.

import { useForm } from '@tanstack/react-form';

First, import the useForm hook from '@tanstack/react-form' to use it in our component.

function LoginForm() {
  const form = useForm({
    defaultValues: {
      email: '',
      password: ''
    },
    onSubmit: async values => {
      // Handle form submission
      console.log('Form Submitted:', values);
    }
  });

  return (
    // Form rendering and logic goes here
  );
}

Initialize the useForm hook with default values for email and password. Define an onSubmit function to handle form submission, logging submitted values for demonstration.

const { Form, Field } = form;
return (
  <Form>
    <div>
      <Field name="email">
        {({ getInputProps }) => <input type="email" {...getInputProps()} required />}
      </Field>
    </div>
    <div>
      <Field name="password">
        {({ getInputProps }) => <input type="password" {...getInputProps()} required />}
      </Field>
    </div>
    <button type="submit">Login</button>
  </Form>
);

Render the form with email and password fields using the Field component. Use getInputProps to spread the necessary props to each input. Include a submit button to submit the form.