---
metaTitle: Form component | AwesCode UI
meta:
  - name: description
    content: The <AwForm /> component is used to render Form - UI Vue component for AwesCode UI.
title: Form
---

# AwForm

**Category:** Organism | **Import:** Dynamic

The `AwForm` component is a form wrapper that handles form submission, error management, and loading states. It integrates with Axios for HTTP requests and provides automatic error handling and field validation.

## Overview

`AwForm` extends standard HTML form functionality with:
- Automatic form submission handling via Axios
- Error display and field-level error management
- Loading state management
- Support for multiple HTTP methods (GET, POST, DELETE, PATCH)
- Integration with form field validation
- Enter key navigation between fields

## Usage

### Basic Example

```markup
<AwForm url="/api/submit" method="post" @sended="handleSuccess">
    <AwInput name="name" label="Name" />
    <AwPassword name="password" label="Password" />
    <AwButton type="submit">Submit</AwButton>
</AwForm>
```

### With Error Handling

```markup
<AwForm 
    url="/api/submit" 
    method="post"
    @sended="handleSuccess"
    @error="handleError"
>
    <AwInput name="email" label="Email" />
    <AwButton type="submit">Submit</AwButton>
</AwForm>
```

### With Custom Submit Handler

```markup
<AwForm 
    ref="form"
    url="/api/submit" 
    method="post"
    @submit.prevent="customSubmit"
>
    <AwInput name="name" label="Name" />
    <AwButton type="submit">Submit</AwButton>
</AwForm>
```

### Loading State

When loading form data, use `AwContentPlaceholder`:

```markup
<template>
    <AwContentPlaceholder v-if="loading" type="form" :lines="4" />

    <AwForm v-else url="/api/submit" method="post">
        <AwInput name="name" label="Name" />
        <AwInput name="email" label="Email" />
        <AwButton type="submit">Submit</AwButton>
    </AwForm>
</template>

<script>
export default {
    data() {
        return {
            loading: true
        }
    },
    async mounted() {
        await this.loadFormData()
        this.loading = false
    }
}
</script>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| url | Form action URL | `String` | `false` | `''` |
| method | HTTP method | `String` | `false` | `'post'` |
| className | Custom CSS class | `String` | `false` | `'aw-form'` |

**Method Validator:** Must be one of: `'get'`, `'post'`, `'delete'`, `'patch'` (case-insensitive)

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Form content (form fields, buttons, etc.) | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| sended | `Response` | Emitted when form submission succeeds |
| error | `ErrorResponse` | Emitted when form submission fails |
| submit | `Event` | Emitted on form submit (can be prevented) |

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| resetErrors | - | Resets all field validation errors |
| setErrors | `errors: Object` | Sets form errors (can be overridden via config) |

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwForm: {
    baseClass: 'aw-form',
    method: 'post',
    setErrors(errors) {
      // Custom error handling logic
      // Default implementation sets field errors via setCustomValidity
      // and displays general errors in component
    },
    submit($event) {
      // Custom submit handler
      // Default implementation uses Axios to submit form data
      // Returns a Promise
    }
  }
}
```

**Default Config:**
- `baseClass`: `'aw-form'`
- `method`: `'post'`
- `setErrors`: Function that sets field errors using `setCustomValidity` and displays general errors
- `submit`: Function that prevents default, collects FormData, and submits via `$axios.request()`

## Related Components

- `AwInput` - Text input field component
- `AwPassword` - Password input field component
- `AwButton` - Button component for submit buttons
- `AwTextarea` - Textarea component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Form automatically collects all form field values using `FormData`
- For GET requests, data is sent as URL parameters
- For POST/DELETE/PATCH requests, data is sent in request body
- Errors are automatically displayed at the top of the form
- Field-level errors are set using HTML5 validation API (`setCustomValidity`)
- Component includes `enter-next-field` mixin for keyboard navigation
- Loading state is automatically managed during form submission
- Uses `$axios` instance (must be configured in Nuxt project)