# Conditions

{% hint style="info" %}
On the Options Tab of any Page or Component, you'll find the conditions area, with a button for adding Show/Hide conditions. Here we'll explain a little bit about what they are and how to use them.
{% endhint %}

## What are conditions for?

Conditions help hide and show content depending on the user's selections. With a condition, you can show certain pages and hide others if a user selects a specific option.

## Where they can be placed

* Conditions on pages
* Conditions on components
* Conditions on buttons

## Types of conditions

* Is / Includes: It means the component will be displayed if another component is or includes any of the selected value/s.
* Is Not / Does Not Include: It means the component will be displayed if another component isn't or doesn't include any of the selected value/s.
* Exists: It means the component will be displayed if another component exists or has a value.
* Does Not Exist: It means the component will be displayed if another component doesn't exist or doesn't have a value.

## Example use-cases

* Showing a "We don't work in your area" or "You must be older than 18" page if the user's input doesn't match your requirements, hide it if it does.&#x20;
* Create a couple of groups of bullet points describing the different service plans you're offering. Show one or the other depending on the plan you recommend for the user.
* You can have a Stripe component for subscriptions, another for one-time payments, and another one for collecting card details. You can hide the ones you don't need for a particular customer.

## How to add a condition

### Step 1:

* Click on "+ Add Condition" on the Options tab after selecting the page, component, or button you want the condition for.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2Fv6IylmtwjqO7RGlLt2Wn%2Fimage%20\(77\).png?alt=media\&token=ded32140-b40b-4868-91a4-7cedab1acb6a)

### Step 2:

* Select a property for your condition. For example: if you want plain text to appear if the user selects a specific option of an Options Selector, you would select the key of the Options Selector in which that option is.

### Step 3:

* Select the type of condition.
* You can only select Is/Includes or Is Not/Does Not Include if you are making a condition on an Options Selector.
* If the selection is Exists/Does Not Exist, skip the next step.

### Step 4:

* Select a value for the condition. This is the key value of the property selected.&#x20;
* You can select more than one value and it will work as an OR condition of the values. For example: If your property is a Color and you select Is/Includes Blue, Gray, and Yellow as values, if any of those values have been selected, the condition will be true and the component will be displayed.

{% hint style="warning" %}
If more than one condition is added to a page, component, or button, both conditions need to be true for the component to be displayed.
{% endhint %}

{% hint style="warning" %}
Tip: An alternative way to Hide components, pages or buttons is toggling on "Hide Page"/"Hide Component"/"Hide Button".
{% endhint %}

## Useful Links

{% content-ref url="../how-tos/content-how-tos/how-to-create-an-option-selector-results-page" %}
[how-to-create-an-option-selector-results-page](https://trysavvy.gitbook.io/savvy/how-tos/content-how-tos/how-to-create-an-option-selector-results-page)
{% endcontent-ref %}
