# Class Toggle

## Setup

**Attribute**: `sf-react = class(expression, className)` (see [*WTF is an expression?*](https://deltaclan.gitbook.io/superform/additional-resources/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. 

<mark style="background-color:green;">**You are not restricted to framework-specific classes**</mark><mark style="background-color:green;">. Use any class you want.</mark>

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

{% hint style="info" %}
**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*](https://deltaclan.gitbook.io/superform/essentials/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.
{% endhint %}

***

## Examples

### 1. Simple class toggle

```html
// 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>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FmB4tHjYaiM6w6uyESuwC%2Fclass_reactivity_simple_example_1.mp4?alt=media&token=95a9c0a9-3157-4f8e-a9d2-230d316f618d>" %}

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

```html
// 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>
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F0aVhGDalW5czFuEGQzvq%2F%24s_Simple_Example_reactive_Final.mp4?alt=media&token=2123b03d-a8d3-4884-a01f-67367d824988>" %}