Integrating Third-Party UI Components into TanStack Forms

Show how to integrate a third-party UI component library (e.g., Material-UI) with TanStack forms for enhanced UI capabilities.

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

Imports from TanStack Form and Material-UI components are brought in to be used in the form.

const MyForm = () => {
  const { formContext, handleSubmit, control } = useForm();
  const onSubmit = data => console.log(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name='firstName'
        control={control}
        render={({ field }) => <TextField {...field} label='First Name' />}
      />
      <Controller
        name='lastName'
        control={control}
        render={({ field }) => <TextField {...field} label='Last Name' />}
      />
      <Button type='submit'>Submit</Button>
    </form>
  );
};

This is the JSX for the form. It leverages the useForm hook from TanStack Form and integrates Material-UI TextField components using the Controller wrapper from TanStack Form for form control.