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.

---

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.