# Conditional fields

Use conditional fields to show/hide fields in the content editor and build complex nested menu structures

## Overview

Conditional visibility shows Hygraph's commitment to increasing the productivity of editors and developers who are dealing with complex content.

As deeply nested content structures can sometimes challenge editors, conditional visibility allows to show selected fields only when editors truly need them.

## What you can do

You can use the conditional visibility option on the configuration of certain fields to make them visible or hidden in the content editor.

The main use case for conditional fields is to simplify the content form when a  model contains complex nested menu structures, where each item may serve as a link or as another layer of dropdowns.

**Example situation:**

[Check out our example](https://hygraph.com/docs/developer-guides/schema/conditional-fields#nested-structures-example) on how to use conditional visibility to simplify a content form that uses nested components!

## Conditional visibility

You will find the `Conditional visibility` option in your field configuration, in the `Advanced` tab.

![Conditional visibility inside field details](https://hygraph.com/images/docs/user-guides/conditional-fields/field-visibility-checkbox.png)

When you select the checkbox, more options display:

![Conditional visibility options](https://hygraph.com/images/docs/user-guides/conditional-fields/field-visibility-options.png)

The dropdown will allow you to select a [Boolean](https://hygraph.com/docs/developer-guides/schema/conditional-fields#boolean-field) or an [Enumeration](https://hygraph.com/docs/developer-guides/schema/conditional-fields#enumeration-field) field from the same model, which will be used to set the condition.

Condition setting differs depending on which field type you select from the dropdown. The following sections explain how to set conditions using each type.

### Boolean field

[Video: Conditional visibility - Boolean](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9xamdhu8207vxq93umsjt)

If you select a boolean field from the `Conditional visibility` dropdown you will have the option to select `is` or `is not` in the following dropdown, and then `true` or `false` in the last one.

Let's look into an example of how this works. Imagine we have a schema for a bookshop, with a model for **Author** and a model for **Product** (books). In the **Author** model, we have a boolean field called **In stock**, followed by a reference field that allows adding related books.

The reference field has conditional visibility settings that use the **In stock** boolean and are set to `In stock is true`. This means that the reference field to add books will only display in the content editor if you set the **In stock** boolean to `true`.

Here's a video showing you how we set this up:

[Video](https://www.youtube.com/watch?v=NXiG_baCY8Y)

Similarly, you could have a component that displays information about when a book will be in stock and use the same **In stock** boolean to set the condition to `In stock is false`. In this case, if your book is not in stock and so you set the boolean to `false`, the component will display on the content form for your editors to add information about when the product will be available.

**Is your conditional visibility checkbox grayed out?:**

[Check out our troubleshooting section!](https://hygraph.com/docs/developer-guides/schema/conditional-fields#troubleshooting)

### Enumeration field

[Video: Conditional visibility - Enumeration](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/cmnn9xaohhu8a07vxun01trur)

If you select an enumeration field from the `Conditional visibility` dropdown you will have the option to select one of the following conditions in combination with one of the enumeration values:

| Condition                   | Description                                                                               |
| --------------------------- | ----------------------------------------------------------------------------------------- |
| **`is` + Value**            | The field is visible if the enumeration value is selected in the content form.            |
| **`is not` + Value**        | The field is visible if the enumeration value is not selected in the content form.        |
| **`contains any` + Value**  | The field is visible if at least one of the indicated the enumeration values is selected. |
| **`contains all` + Value**  | The field is visible if all of the indicated the enumeration values are selected.         |
| **`contains none` + Value** | The field is visible if none of the indicated the enumeration values are selected.        |

**Pro Tip:**

The conditions `contain all` and `contain any` work with enumeration fields that allow multiple values.

Let's look into an example of how this works. Imagine we have a schema for a bookshop, with a model for **Author** and a model for **Product** (books). In the **Author** model, we have an enumeration field called **Offers** containing 3 values (Location 1, Location 2, Location 3), followed by a reference field that allows adding related books that are on sale.

The reference field has conditional visibility settings that use the **Offers** enumeration and are set to `Offers is Location 2`. This means that the reference field to add books on sale will only display in the content editor if you use the **Offers** dropdown to select the `Location 2` value.

Here's a video showing you how we set this up:

[Video](https://www.youtube.com/watch?v=z3_OUUHbyU8)

**Is your conditional visibility checkbox grayed out?:**

[Check out our troubleshooting section!](https://hygraph.com/docs/developer-guides/schema/conditional-fields#troubleshooting)

### Edit the base field

If you edit the base field - boolean or enumeration - by changing the selected condition on the content form, the content stored in hidden conditional fields will be deleted upon saving the content entry. This is done in order to ensure consistency of the data.

This applies when you change any of the visibility conditions from `TRUE` to `FALSE` or `null` (by clearing the boolean field in the content form).

## Nested structures example

The conditional visibility functionality is especially useful for simplifying content forms by only showing sections when the configured conditions are met.

Check out the following video to see how conditional visibility does this with nested components:

[Video](https://www.youtube.com/watch?v=u56iU-_hV9c)

## Troubleshooting

Is your `Conditional visibility` checkbox grayed out? This can help:

| Check                                                          | Solution                                                                                                                                                                            |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Is your field required?**                                    | Conditional visibility does not support required fields. **Deselect the `Make field required` checkbox to enable conditional visibility.**                                          |
| **Is your field hidden?**                                      | Conditional visibility does not support hidden fields. **Set the `field visibility` to `Read / Write` or `Read only` to enable conditional visibility.**                            |
| **Do you have a boolean or enumeration field in your schema?** | Conditional visibility uses boolean or enumeration fields in the model you're working on. **Add a `Boolean` or `Enumeration` field to your model to enable conditional visibility** |