# Class Toggle

## Setup

**Attribute**: `sf-react = class(expression, className)` (see [*WTF is an expression?*](/superform/additional-resources/wtf-is-an-expression.md))

**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*](/superform/essentials/variables.md)).

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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deltaclan.gitbook.io/superform/reactivity/class-toggle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.