Initializing TanStack Form with Basic Fields
Demonstrate how to set up a TanStack Form instance and define simple text input fields with initial values.
import { useForm } from '@tanstack/react-form';
Import the useForm hook from the '@tanstack/react-form' package.
function MyForm() {
Define a functional component where our form will be initialized.
const { register } = useForm({
defaultValues: {
firstName: '',
lastName: ''
}
});
Initialize the useForm hook with default values for the form's fields.
return (
<form>
<label htmlFor='firstName'>First Name</label>
<input id='firstName' {...register('firstName')} />
<label htmlFor='lastName'>Last Name</label>
<input id='lastName' {...register('lastName')} />
</form>
);
}
Render the form with two input fields for first name and last name, utilizing the register function provided by useForm for binding.
export default MyForm;
Export the form component for use in other parts of the application.