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.
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.
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.
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.
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.
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.
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.
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.
Use the Control component action and select either the Set current view key or Set current view index method.
setCurrentView() with the key for the view or
setCurrentViewIndex() with the index of the view:
container1.setCurrentView("View 1"); container1.setCurrentViewIndex(0);
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.
In general, Retool recommends using the preconfigured Stepped or Tabbed Containers.
Updated 3 months ago