Integrating TanStack Form with Material-UI Components

Demonstrate how to wrap a Material-UI TextField component with TanStack Form for controlled input management and validation.

import React from 'react';
import { useForm, Controller } from '@tanstack/react-form';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

Imports necessary libraries and components: React, useForm and Controller from TanStack Form, and TextField and Button from Material-UI.

function MyForm() {
  const form = useForm({
    defaultValues: { firstName: '' }
  });

  const onSubmit = form.handleSubmit((values) => {
    console.log(values);
  });

  return (
    <form onSubmit={onSubmit}>
      <Controller
        control={form.control}
        name="firstName"
        render={({ field }) => (
          <TextField
            {...field}
            label="First Name"
            variant="outlined"
          />
        )}
      />

      <Button type="submit">Submit</Button>
    </form>
  );
}

Defines a component using useForm hook for form state management and Controller to integrate Material-UI TextField. The Controller connects TextField to the TanStack form.