Visibility

Dynamic Element Visibility — anywhere inside an instance.

Setup

Attribute: sf-react = visibility(expression) (see WTF is an expression?)

Where: any HTML element within the form to control its visibility dynamically.

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 visibility 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. Visibility based on age

// HTML Example

<!-- Input for age -->
<input type="number" name="age" placeholder="Enter your age">

<!-- Conditionally display additional information for adults -->
<div sf-react="visibility($f.age >= 18)">
  <p>Additional information for adults.</p>
</div>

Text message displayed when age number input is >= 18.

2. Conditional success messages on form submit

// HTML Example

<!-- Success Message for age >= 18 -->
<div sf-react="visibility($f.age >= 18)">
  <p>Adult! We can't wait to meet you in person!</p>
</div>

<!-- Success Message for age < 18 -->
<div sf-react="visibility($f.age < 18)">
  <p>You are a minor, you can't go on 🫠</p>
</div>

Different success messages example based on age input.