Class Toggle

Dynamic Class Toggling — any class, any element inside an instance.

Setup

Attribute: sf-react = class(expression, className) (see WTF is an expression?)

Where: any HTML element within the form that you want to dynamically add to or remove CSS classes from based on conditions.

Description: dynamic addition or removal of any CSS classes on an element based on the evaluation of a specified expression.

You are not restricted to framework-specific classes. Use any class you want.

This is particularly useful for changing the appearance of form elements in response to user interactions or form states.

Pro Tip

It's particularly effective when used to display real-time changes based on form data and variables such as $f, $v, $s, $p (see Form Data & Variables).

You can inject JavaScript expressions directly, leveraging operators like >, <, ==, ===, and the ternary ?: operator in sf-react to enable robust, condition-based class toggling updates—perfect for interactive, responsive form elements.

Implement logical operators (&&, ||, !) to combine conditions, enhancing the complexity as needed while ensuring they result in a boolean outcome.

---

Examples

1. Simple class toggle

// HTML Example
<!-- Checkbox for opting in to a newsletter -->
<label class="checkbox-label">
  <input type="checkbox" name="subscribe">
  Subscribe to our newsletter
</label>

<!-- Dynamically add 'is-subscribed' class if the checkbox is checked -->
<div sf-react="class($f.subscribe, is-subscribed)">
  Thank you for subscribing!
</div>

2. Tab navigation with dynamic class toggling (leveraging $s variable)

// HTML Example

<!-- Step Tabs -->
<div class="tabs">
  <div sf-react="class($s >= 0, is-active)">Step 1</div>
  <div sf-react="class($s > 0, is-active)">Step 2</div>
  <div sf-react="class($s > 1, is-active)">Step 3</div>
</div>

<!-- Form Steps -->
<div sf-step="step-1">Step 1 Content</div>
<div sf-step="step-2">Step 2 Content</div>
<div sf-step="step-3">Step 3 Content</div>