> For the complete documentation index, see [llms.txt](https://deltaclan.gitbook.io/superform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup.md).

# Manual Error Setup

Advanced error handling — and customizable.

{% hint style="info" %}
**I need more customization**

When automatic error handling doesn't meet your specific needs for placement and styling of error messages, manual setup using `sf-error` and/or `sf-error-class` provides the flexibility to precisely control the positioning and dynamic appearance of error elements.<br>

**Class-agnostic setup**

We don't require specific class names. Write and import your own.
{% endhint %}

***

## Setup - Error Binding

**Attribute**: `sf-error = inputFieldName`

**Usage**: Explicitly links an error message container to an input field.&#x20;

Essential when the error element is not an [**Automatic Error Element**](/superform/input-validation-and-errors/error-management/automatic-error-setup.md) to the input or for even more customized error handling (*read below)*.&#x20;

**Used for**: no Automatic Errors, toast errors.

### Usage Scenarios

#### 1. An error element with a custom class ex:`text-size-small`  (*no "error", "invalid, "fail" keywords*).

The `sf-error` attribute is required here to manually link the error message with the input field because the error message is in the Sibling Context but the class does not contain any of the "*error*", "*invalid*", or "*fail*" keywords.&#x20;

```html
// HTML Example
<!-- Input field with an error message not as a direct sibling -->
<input type="email" name="userEmail" sf-error="userEmail">
<div class="info">Please check your email for verification</div>
<div class="text-size-small" sf-error="userEmail">Invalid email address</div>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F40QOmEJFC0Zd5J7fYgen%2FManual_Error_Setup_Example_2.mp4?alt=media&token=00d3379b-02a0-4c6d-8d53-5495be69dffc>" %}

#### 2. Toast notification

For cases requiring broader flexibility, such as displaying toast notifications for errors anywhere in a form, Superform needs also manual error binding with `sf-error` attribute.&#x20;

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F2wuDKF2RZD1rMMz4pZ0D%2FManul_Error_Setup_Toast.mp4?alt=media&token=9be57669-8fae-445d-8ebe-31a780eef7e7>" %}

***

## Setup - Error Class Toggle

**Attribute**: `sf-error-class = className`

**Usage**: Toggle CSS classes based on the validation state.

*Requires `sf-error` when element is out of Proximity Context (<mark style="background-color:purple;">link?!)</mark>.*

### **Usage Scenarios**

#### **1. Beyond hide/show of an Automatic Error:**

To elevate the visual impact of auto-detected error messages (see [Automatic Error Setup](/superform/input-validation-and-errors/error-management/automatic-error-setup.md)) beyond basic show/hide functionality, assign an additional class using `sf-error-class`. This enriches the error feedback without needing `sf-error`, as the proximity detection automatically identifies elements containing "error" in the class name.

* **Situation:** The error element is automatically detected within the sibling context (Automatic Error Element).
* **Implementation:** Apply `sf-error-class="classname"` to toggle an additional class for greater visual impact. No `sf-error` attribute is needed as the error relationship is established by proximity.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FGM2pIocifEY7wv0qTIDS%2FError_Class_Proximity_1Sibling_Shake_Effect.mp4?alt=media&token=9bf7f620-b2c9-4ebc-b0a4-dddc87afd2ce>" %}
Adding an extra class to our sibling error!
{% endembed %}

#### 2. **Styling Input and its Parent:**&#x20;

* **Situation:** To style the input and/or its parent element when an error occurs.
* **Implementation:** Use `sf-error-class` on the input and/or the parent element to apply a class upon error validation, without needing to set `sf-error`.
* **HTML Example:**

  ```html
  <div class="input-group" sf-error-class="red-background">
    <input type="text" name="username" sf-error-class="red-border">
    <div class="error-message">Username is required</div>
  </div>
  ```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FhH2PLnp4facbStzTeNZ3%2FError_Class_Parent_and_Input.mp4?alt=media&token=33322119-d581-4b8a-8982-fa56a3ff0dc2>" %}

#### 3. **Customizing Errors Outside of Proximity Context:**

* **Situation:** When errors need to be managed outside the immediate context of the input or when specific error handling is required across different elements.
* **Implementation:** Combine `sf-error="fieldName"` with `sf-error-class="classname"` to link error messages and toggle classes where the error elements are not direct siblings or are located dynamically.
* **HTML Example:**

  ```html
  <input type="text" name="address" sf-error="addressError" sf-error-class="error-highlight">
  <div id="addressError" class="custom-error-location">Please provide a valid addres
  ```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FmHwrrDMspZG46rbXDErn%2FError_Binding_Plus_Error_Class_Toast.mp4?alt=media&token=a1b2b401-97da-4462-a29f-ba0c03b747c5>" %}

{% hint style="info" %}
**Pro Tip**

**Leverage Automatic Detection:** Where possible, use the automatic detection capabilities of Superform to minimize manual configurations and streamline error handling.

**Maintain Visual Consistency:** Ensure that the toggled classes align with your overall form design to maintain a seamless and professional appearance.
{% endhint %}