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. Simple class toggle
  • 2. Tab navigation with dynamic class toggling (leveraging $s variable)

Was this helpful?

  1. Reactivity

Class Toggle

Dynamic Class Toggling β€” any class, any element inside an instance.

Last updated 1 month ago

Was this helpful?

Setup

Attribute: sf-react = class(expression, className) (see )

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

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>

⚑
WTF is an expression?
Form Data & Variables