Show and hide components

You can control when to show components to your users. This functionality is often used to guide users through an application or to highlight certain components.

Components are shown by default but there's a Hidden property you can use to hide them. When true, this property hides the component. There're a couple ways to set this property.

• Set it directly on the component
• Use an event handler

📘

Show hidden components in edit mode

Enable the Always show in edit mode option on hidden components so you can change them in edit mode. You can also use CMD + / to toggle hidden components.

Set the property directly

Setting the Hidden property directly is often used to hide components based on a given condition. For example, you might want to hide a component until a query finishes. To do this, you can set Hidden to something like {{!query1.data}} on the component. This waits to show the component until after query1 completes.

You can also use the state of one component to set the Hidden property of another component. Toggle links are commonly used for this. For example, you could hide an image until users click the toggle link. To do this, you'd set Hidden on the image to {{ !toggleLink1.value || toggleLink1.disabled }}.

Hiding components can affect your application's layout. If needed, you can enable the Maintain space when hidden option on the component to preserve your application's layout.

Use an event handler

Event handlers are used when you want to control components based on user actions. For example, you could use a button to show or hide some text. To do this, you'd create an event handler on the button that hides the image.