# Submission

_Handling submission and/or progression in a form._

## Basic submission

The `useSubmit` hook can be used to guard submission logic and trigger `submit` validation.

> The provided function will not be called until `submit` validation succeeds.

```tsx
const { handleSubmit } = useSubmit((values) => {
  fetch('/submit-form', {
    method: 'POST',
    body: JSON.stringify(values),
  });
});

return <button onClick={handleSubmit}>Submit</button>;
```

## Submission state

The `useSubmit` hook also provides state indicating whether async submit logic is in progress and whether the provided `handleSubmit` function has been called.

```tsx
const [fieldProps, fieldMeta] = useField(/* ... */);
const { isValidating, hasSubmitted } = useSubmit(/* ... */);

return (
  <div>
    <input type="text" {...fieldProps} />
    {hasSubmitted && fieldMeta.error}
    <button>{isValidating ? <Spinner /> : 'Submit'}</button>;
  </div>
);
```