# Visibility

## Setup

**Attribute**: `sf-react = visibility(expression)` (see [*WTF is an expression?*](https://deltaclan.gitbook.io/superform/additional-resources/wtf-is-an-expression))

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

{% 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 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.

{% endhint %}

***

## Examples

### 1. Visibility based on age

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

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FawF3TCDT09kMAlghhms3%2FReact_Visibility_1_Fullscreen.mp4?alt=media&token=3387f01d-04cd-4a89-9077-a9dd8210f0a0>" %}
Text message displayed when age number `input` is >= 18.
{% endembed %}

### 2. Conditional success messages on form submit

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

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FkgBkK8QVQPC7t2nzbg2C%2Fvisibility_react_multiple_success_messages.mp4?alt=media&token=c95864e0-c9ba-49c3-be41-91b341668115>" %}
Different success messages example based on age input.
{% endembed %}