Set Attribute

Dynamic custom attribute setting.

Since 2.1.10 (3 Oct 2024)

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.

Check WTF is an expression? page for more information on expressions and how to best utilize them.

---

Example

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

<!-- 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.