# Set Attribute

{% hint style="info" %}
**Since 2.1.10 (3 Oct 2024)**
{% endhint %}

The `attr(expression, attribute)` allows you to dynamically set any custom attribute based on a specified condition or variable value. This makes it easy to update HTML elements with conditional attributes that respond to form interactions, scores, and other data-driven changes.

## **Setup**

**Attribute**: `sf-react = attr(expression, attribute)`

**Where**: Place on any element within your form to dynamically set an attribute’s value based on an expression.

**Usage**: Use `attr()` to add or modify any custom attribute using the `expression` to define the `attribute` value. When the `expression` evaluates to true, the attribute is set accordingly.

{% hint style="info" %}
Check [*WTF is an expression?*](https://deltaclan.gitbook.io/superform/additional-resources/wtf-is-an-expression)  page for more information on expressions and how to best utilize them.
{% endhint %}

***

## **Example**

This example demonstrates how to dynamically set a custom `data-status` attribute based on a scoring variable.

```html
<!-- Form Container -->
<div sf="exampleForm">
    <!-- Step -->
        <!-- Element with a dynamic data attribute -->
        <div sf-react="attr($v.score > 10 ? 'achieved' : 'pending', 'data-status')">
        <!-- Content here reflects the score's status -->
        Score Status
        </div>
</div>
```

In this example:

* **Condition**: The attribute `data-status` updates based on the score in `$v.score`.
* **Result**: When `$v.score` is greater than 10, the `data-status` attribute will show `"achieved"`; otherwise, it will display `"pending"`.

**Pro Tips**

* **Multiple Dynamic Attributes**: You can apply multiple `attr()` reactivity attributes on different (*or same!*) elements within the same form.
* **Complex Conditions**: Use inline JavaScript or combined expressions for complex logic within `attr()`.

This feature provides full control over custom attributes based on real-time data, ideal for implementing conditional visuals, accessibility enhancements, or toggling attributes to improve user engagement.