---
url: "https://vueda.dev/v3/reference/api/js/use/useForm/functions/useForm.md"
title: "useForm"
---

# useForm

## Overview

Generate and provide a form context for a form, using the provided initial values, including methods to update the
 form's values, errors, messages, touched state, modified state, and to reset the form.

## Signature

`useForm(props)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-props">props</span> | `object` | yes | The form context's initial values. |

#### props Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-props-initialValues">initialValues</span> | `object` |  |  | The form's initial values. Not mutated, but changes reset the  form. |

### Returns

[FormContext](/v3/reference/api/js/use/useForm/types/FormContext.md)

## Examples

```vue
<script setup>
import Button from "@vueda/controls/button/Button.vue"
import { ConfirmationRequiredError, ServerFeedbackError } from "@vueda/utils/errors.js";
const myState = reactive({
    submitting: false,
    // when initialValues is changed, the form's values are reset to match
    initialValues: {},
});
const formContext = useForm(myState);
const handleSubmit = async () => {
    try {
        myState.submitting = true;
        // allow all validation to run
        formContext.setAllTouched();
        await nextTick();
        if (formContext.state.anyError) {
            return;
        }
        if (!formContext.state.anyModified) {
            return;
        }
        await submitToServer(formContext.state.submittingValues);
    } catch (e) {
        if (e instanceof ServerFeedbackError && !(e instanceof ConfirmationRequiredError)) {
            formContext.handleServerFormValidationError(e);
            return;
        }
        throw e;
    } finally {
        myState.submitting = false;
    }
};
</script>
<template>
<form @submit.prevent="handleSubmit">
    <form-message type="error" />
    <form-message type="message" />
    <form-field name="field1" label="Field 1">
        <form-label>
            <widget-input />
        </form-label>
    </form-field>
    <form-field name="field2" label="Field 2" validation="numeric" :max-value="100" :min-value="1">
        <form-label>
            <widget-input step="1" />
        </form-label>
    </form-field>
    <Button type="submit">Submit</Button>
</form>
</template>
```

## Source

`client/lib/use/useForm.js:738`