Documentation

Welcome to Retool! We're a fast way to build custom internal software.

You'll find the 5 minute demo, quickstart guide, and documentation for each of our connectors and components here. If you've got any questions -- chat with us on the bottom right!

Get Started    Guides

Dynamically Hide Components

This guide teaches you how to dynamically hide a component based on some other condition in your app.

Example

Suppose that you've got an app that displays an image related to the currently-selected row in a table:

Figure 1. How the app looks when images are shown

Figure 1. How the app looks when images are shown

And you want to hide the image when the user enables the Hide Image Toggle:

Figure 2. How the app looks when images are hidden

Figure 2. How the app looks when images are hidden

Note

When a component is hidden, the space that the component took up on the Canvas is freed up. For example, notice how the Do Stuff button location changes in Figure 1 and Figure 2.

1. Open the Component Editor

Within the Canvas, click the component that you want to hide. In the example above the component to hide is the image. After clicking the component, the Component Editor for that component opens.

Figure 3. The **Component Editor**

Figure 3. The Component Editor

2. Set the hide condition from the Component Editor

In the Component Editor set the Hide (collapse) this component when true field to a boolean JavaScript expression. When this boolean expression is true, the component is hidden. In the case of the example, the boolean expression is just the value of the Toggle component, {{ toggle1.value }}.

Figure 4. The **Hide (collapse) this component when true** field

Figure 4. The Hide (collapse) this component when true field

See Transformers if you need to run a lot of JavaScript before you can compute your boolean expression and you don't want to cram it all into the single-line Hide this component when true field.

Dynamically Hide Components


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.