> Markdown version of [Loading & Saving Form Data](https://vaadin.com/docs/next/hilla/lit/guides/forms/binder-load). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# Loading & Saving Form Data

After your bindings are set, you’ll need to fill the bound UI components with data from your business objects.

## <a id="loading-data-to-binder"></a>Loading Data to Binder

You can use the `read()` method in the binder to read values from a business object instance into the UI components.

```typescript
this.binder.read(person);
```

Using `reset()` resets to the previous value, which is empty initially.

```typescript
this.binder.reset();
```

You can use the `clear()` method to set the form to empty.

```typescript
this.binder.clear();
```

## <a id="saving-data"></a>Saving Data

You can use `submitTo()` to submit a value to a callback. The `submitTo()` method is an asynchronous function, so you can use `await` to wait for the result.

Using `submitTo()` can be beneficial:

- Binder can track the submission progress, which is useful for disabling a save button, for instance, when a submission is ongoing.

- Submission failures are applied to the form fields, automatically. Therefore. there is no need to do an explicit `try-catch`.

- Submission overall error can be handled globally using a promise’s `.catch` block.

Below is an example in which `submitTo()` is set to submit to a service method:

```typescript
await this.binder.submitTo(viewService.savePerson);
```

Alternatively, you can set up an `onSubmit()` callback in a configuration object when creating `Binder`. Then, when submitting, you can call the `binder.submit()` method.

```typescript
private binder = new Binder(this, PersonModel, {
  onSubmit: viewService.savePerson
});

binder.submit();
```