#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.

#Conditional visibility

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

Conditional visibility inside field details

When you select the checkbox, more options display:

Conditional visibility options

The dropdown will allow you to select a Boolean or an Enumeration 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

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:

Watch

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.

#Enumeration field

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:

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:

Watch

#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:

Watch

#Troubleshooting

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