> Markdown version of [Binding Data to Forms](https://vaadin.com/docs/next/hilla/guides/forms/binder). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# Binding Data to Forms

Hilla provides a way for binding input fields to a data model.

The client-side `Binder` supports browser-callable Java services for loading and saving the form data, and reuses the metadata from Java Bean validation annotations for client-side validation.

## <a id="api-basics"></a>API Basics

The form binding API consists of three key concepts:

- The `field()` directive to bind the field components in form views

- The generated TypeScript models for POJO classes used in the services, which are used as field references and provide the necessary metadata

- The `useForm` React Hook returns a `UseFormResult` object that is responsible for keeping track of the form state, the default and current values, and validation of the data.

See the [Form Binding Reference](https://vaadin.com/docs/next/hilla/guides/forms/reference.md) for more details.

## <a id="how-to-bind-form-data"></a>How to Bind Form Data

For example, let us consider a browser-callable Java service with methods for loading and saving a `Person` bean:

```java
/**
 * A browser-callable service for the person-view.ts form view.
 */
@BrowserCallable
public class PersonService {
    /**
     * Loads a Person to edit into the view.
     * @return default form data
     */
    public Person loadPerson() {
        // ...
    }

    /**
     * Saves the edited Person from the view.
     * @param person form data to save
     */
    public void savePerson(Person person) {
        // ...
    }
}
```

To bind data to a form, follow these steps in your `frontend/views/person/PersonView.tsx` client-side `React` view:

1. Import the `useForm` hook from the `@vaadin/hilla-react-form` package. Import your `PersonService` data service and the generated `PersonModel` from the `frontend/generated` folder:

   ```tsx
   import { useForm } from '@vaadin/hilla-react-form';

   import { PersonService } from 'Frontend/generated/endpoints';
   import PersonModel from 'Frontend/generated/com/example/application/PersonModel';
   ```

2. Acquire a `UseFormResult` instance for your view by calling the `useForm`:

   ```tsx
   export default function PersonView() {
     // ...

     const { model, field } = useForm(PersonModel);

     // ...
   }
   ```

   The `PersonModel` here is generated alongside a `Person` TypeScript data interface from the `Person.java` bean. This describes the structure of the data and the validation-related metadata for the form binding.

3. Bind the UI components in the template using the `{…​field()}` syntax:

   ```tsx
   export default function PersonView() {
     // ...

     const { model, field } = useForm(PersonModel);

     return (
       <TextField label="Full name" {...field(model.fullName)} />
     );

   }
   ```

   In this example, `model` is an instance of `PersonModel`.

   > **Note:** Models don’t contain any actual data. To access the actual current or default value of the form, you can acquire their respective reference by destructing the `UseFormResult` instance as `const { value, defaultValue, …​ } = useForm(…​)` when calling the `useForm` hook.