# Automatic Error Setup

Superform now intelligently detects and manages automatically error messages related to form inputs, enhancing accuracy and user experience without the need for extensive manual setup.

## Overview & Setup

{% hint style="info" %}
**Automatic Error Element - no attributes!**

Superform automatically recognizes error-related keywords ("**error**," "**invalid**," "**fail**") in class names within any of the two siblings below and one sibling above an input field. It will hide and show these errors automatically.

This feature ensures error messages are correctly associated with the relevant inputs, facilitating immediate and accurate setup.

⚠️ **Smart Error Linking**

Error messages placed between two inputs are automatically linked to the nearest preceding input, ensuring precise feedback in dense form layouts.

***

→ For further error customization head to [Manual Error Setup](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup).
{% endhint %}

### The Proximity Context

Superform's Proximity Context system automatically detects error messages based on class keywords like "error," "invalid," or "fail" within any of the two siblings below and one sibling above an input field.

It can also toggle `sf-error-class` on inputs and their parent elements without needing explicit `sf-error` attributes ( `sf-error-class` and `sf-error` are part of the *Manual Error Setup* — see [here](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup)).

**Key Points:**

* **Automatic Detection**: Manages error messages within two siblings below or one sibling above the input.
* **Class Toggling**: Automatically toggles error classes on both input fields and their parent elements for enhanced feedback.

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F69Y1eq6P4h0bMXXgydcs%2Fimage.png?alt=media&#x26;token=1ab36975-c69f-4794-8efc-1195f399c3c2" alt=""><figcaption><p>When you don't want to use attributes, just use the keywords in error class names.</p></figcaption></figure>

***

## Examples

### 1. Sibling Error

**HTML Example**

```html
<input type="text" name="name" required>
<div class="error-message">Name is required</div>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FxnCl2gsWFV9PYZqnjl9I%2FAutomatic_Error_1_Sibling.mp4?alt=media&token=fef007b4-f659-40d3-8590-d0d461fa559f>" %}

### 2. Two Sibling Errors

**HTML Example**

```markup

<input type="email" name="email" required>
<span class="error-icon">!</span>
<div class="error-message">Email is required</div>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FtduLTYT6my4ujFxf2VHg%2FAutomatic_Sibling_Error-2-next-siblings.mp4?alt=media&token=1c85057d-766c-4c4f-bbeb-b81afc7fd5ff>" %}

### 3. Two and One Sibling Errors

**HTML Example**

```html
<!-- Error message above the input element -->
<div class="i-am-invalid">!!!!! BE CAREFUL !!!!!!!!!</div>
<!-- Name input field -->
<input type="text" name="name" required>
<!-- Additional error-related sibling elements below the input -->
<span class="error-icon">!</span> <!-- Exclamation mark icon indicating error -->
<div class="error-message">Please enter a valid name.</div> <!-- Specific error message -->
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FUEcjv3qtCtsHjz1Lk7kc%2FAutomatic_Error_Setup_2_Next_1_Prev_Revised.mp4?alt=media&token=1f61c6a6-75c7-404b-9d25-e28fd940b057>" %}

***

## CSS Transitions of an Automatic Error

Apply CSS transitions, such as opacity, to create smooth visual effects for a more dynamic and engaging user experience.&#x20;

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F5kyoLPD4P6KapeveLGlO%2Fimage.png?alt=media&#x26;token=bb91e386-0279-450b-8c22-8307f98ff424" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Need even more granular control?**

For more granular control over errors, such as toggling an extra class on error, or implementing toast notifications, please refer to the [Manual Error Setup](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup) subpage.

{% endhint %}