Containers

Group components into cards that support multiple views.

You can group related components together in a card using the Container component. Containers also support multiple views that allow you to separate content into distinct views that users can switch between.

Containers function like any other component. Once added, you can group components within it by dragging them onto the Container.

Layout

Containers contain three sections in which you can place components:

  • Header: The top area that initially contains a Text component for use as a title.
  • Body: The main area for you to place components. If you enable multiple views, switching views changes the content shown in the body.
  • Footer: The bottom area that is useful for optional footnotes and supplementary content.

Component sectionsComponent sections

You can show or hide each section by either manually toggling the relevant option in the Layout section of the Inspect tab or dynamically using a truthy value.

Toggle visibility of Container sectionsToggle visibility of Container sections

Width and height

You have manual control over the width of a Container. You can configure its Height to either Auto or Fixed:

  • Auto: The height grows automatically based on the content.
  • Fixed: The height is a fixed size that you manually control. Scroll bars appear if the content exceeds the height.

Disable interaction

You can disable interaction with a Container by setting Disabled to a truthy value. Disabling a Container also prevents user interaction with any nested components it contains.

Multiple views

Containers support multiple views for grouping content. Only one view is visible at a time and users switch between them by changing the current view of the Container component. Switching views applies only to the body of a Containerโ€”the header and footer areas are shared across all views.

Select or drag a Container on the Canvas and click + Enable multiple views in the Views section of the Inspect tab. Once enabled, you manage views and select which view is visible using the option list editor.

To add components to the selected view, drag them onto the Container as normal. Each component is associated with the view in which it's contained. As you switch between views, only components associated with the current view appear.

Stepped Containers

The Stepped Container combines the Steps component with a Container, allowing you to create a step-by-step flow through the Container's views. This is useful if you have a multi-step process that users must complete.

You can drag Stepped Containers directly to the Canvas. The Container automatically includes a Steps component that maps to views. As you make changes to views, the steps update automatically.

You can use conditional logic to prevent users from progressing to the next step, such as an incomplete selection or missing input, or mark steps as complete.

Tabbed Container

The Tabbed Container combines the Tabs component with a Container, allowing you to create tabbed navigation for the Container's views.

You can drag Tabbed Containers directly to the Canvas. The Container automatically includes a Tabs component that maps to views. As you make changes to views, navigation options update automatically.

Switch between views

In addition to using Stepped or Tabbed Containers, you can select a Container's current view using event handlers, JavaScript, or a linked Steps or Tabs component.

Event handler

Use the Control component action and select either the Set current view key or Set current view index method.

Alt textAlt text

JavaScript

You can write JavaScript (e.g., JavaScript queries or Run script event handlers) to select a view using setCurrentView() with the key for the view or setCurrentViewIndex() with the index of the view:

container1.setCurrentView("View 1");
container1.setCurrentViewIndex(0);

Link to Steps or Tabs

You can link a Steps or Tabs component to a Container with multiple views, creating a Stepped or Tabbed Container Toggle the Link to a Container setting and select a Container to link with. To unlink, toggle the option off.

Link to a containerLink to a container

In general, Retool recommends using the preconfigured Stepped or Tabbed Containers.