Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • πŸ«€Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • βš™οΈGlobal Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • πŸŽ›οΈInput Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚑Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • πŸ”’Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • πŸ› οΈJavascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • πŸ“–Additional Resources
    • WTF is an expression ? πŸ†•
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup
  • Examples
  • 1. Visibility based on age
  • 2. Conditional success messages on form submit

Was this helpful?

  1. Reactivity

Visibility

Dynamic Element Visibility β€” anywhere inside an instance.

Last updated 1 month ago

Was this helpful?

Setup

Attribute: sf-react = visibility(expression) (see )

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

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>

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>

⚑
WTF is an expression?
Form Data & Variables
Text message displayed when age number input is >= 18.
Different success messages example based on age input.