The Container component for Retool Apps

A container to group other components together with flexible layout controls.

Version: Cloud and 3.234 Edge

Demo

For more information about using the Container component, refer to the containers guide.

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

clickable

Whether there is an enabled Click event handler.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Event handlers
Default	false

Examples

true

---

currentViewIndex

The index of the selected view.

Type	number
Format	Integer
Configurability	Read-only
Default	null

Examples

3

---

currentViewKey

The key value of the selected view.

Type	string
Format	Plain Text
Configurability	Read-only
Default	null

Examples

"view1"

---

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Disabled
Default	false

Examples

true

---

disabledByIndex

A list of values for each item, by index, that reflect whether they are disabled.

Type	array
Array values	boolean
Configurability	Read-only
Default	[]

Examples

[true, false, true]

---

enableFullBleed

Whether to expand the contents to fill available space.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Expand contents to fit
Default	false

Examples

true

---

events

A list of configured event handlers that trigger actions or queries.

Type	array
Array values	object
Configurability	Inspector > Interaction > Event handlers

Array Object Properties

event

The event that triggers the action. Refer to the events section for details of available events for this object.

Type	string
Configurability	Inspector > Interaction > Event handlers > Event

---

method

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type	string
Configurability	Inspector > Interaction > Event handlers > Edit event handler > Run script actions

---

type

The type of action to perform.

Type	string
Configurability	Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values	Value Description datasource Control query. widget Control component. script Run script. state Set variable. localStorage Set localStorage. util Perform utility action (e.g., Open URL or Confetti).

---

---

footerPadding

The amount of padding used within the footer.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Footer > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

"8px 12px"

---

headerPadding

The amount of padding used within the header.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Header > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

"8px 12px"

---

hiddenByIndex

A list of items, by index, and whether they are hidden.

Type	array
Array values	boolean
Configurability	Read-only
Default	[]

Examples

[true, false, true]

---

hoistFetching

Whether to display a loading indicator whenever nested objects are fetching data.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Hoist loading state
Default	false

Examples

true

---

hovered

Whether the component is currently hovered.

Type	boolean
Format	True/False
Configurability	Read-only

Examples

true

---

iconByIndex

A list of icons for each item, by index.

Type	array
Array values	string
Configurability	Read-only
Default	[]

Examples

["/icon:bold/shopping-gift", "/icon:bold/interface-user-single", "/icon:bold/interface-align-layers-1"]

---

iconPositionByIndex

A list of icon positions for each item, by index, relative to labels.

Type	array
Array values	string
Configurability	Read-only
Allowed Values	Value Description left Left. right Right.

---

id

The unique identifier (name).

Type	string
Format	Plain Text
Configurability	Inspector
Default	container1

Examples

query1

button1

---

isHiddenOnDesktop

Whether to show or hide this object in the desktop layout.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Show on desktop
Default	false

Examples

true

---

isHiddenOnMobile

Whether to show or hide this object in the mobile layout.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Show on mobile
Default	true

Examples

true

---

itemMode

The configuration mode for container views. Always set to static.

Type	string
Configurability	Inspector > Content > null
Allowed Values	Value UI Option Description dynamic Mapped Options dynamically mapped from an array. static Manual Options manually configured in the IDE.
Default	static

Examples

"dynamic"

---

labels

A list of labels for each item. Falls back to the corresponding value if no label is provided.

Type	array
Array values	string
Configurability	Read-only
Default	[]

Examples

["Label 1", "Label 2", "Label 3"]

---

loading

Whether to display a loading indicator.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Loading
Default	false

Examples

true

---

maintainSpaceWhenHidden

Whether to take up space on the canvas if hidden is true.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Maintain space when hidden
Default	false

Examples

true

---

margin

The amount of margin to render outside.

Type	string
Format	Plain Text
Configurability	Inspector > Spacing > Margin
Allowed Values	Value UI Option Description 4px 8px Normal Normal margin. 0 None No margin.
Default	4px 8px

Examples

4px 8px

---

padding

The amount of padding to render inside.

Type	string
Format	Plain Text
Configurability	Inspector > Spacing > Padding
Allowed Values	Value Description 4px 8px Normal padding. 0 No padding.
Default	4px 8px

Examples

4px 8px

---

showBody

Whether to show the body.

Type	boolean
Configurability	Read-only

---

showBorder

Whether to show a border.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Show border
Default	false

Examples

true

---

showFooter

Whether to show the footer area.

Type	boolean
Configurability	Inspector

---

showFooterBorder

Whether to show a border above the footer.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Footer > Appearance > Show separator

Examples

true

---

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Header > Appearance > Show header
Default	false

Examples

true

---

showHeaderBorder

Whether to show a border under the header.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Header > Appearance > Show separator
Default	true

Examples

true

---

showInEditor

Whether the component remains visible in the editor if hidden is true.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Always show in edit mode
Default	false

Examples

true

---

style

Custom style options.

Type	object
Configurability	Inspector > Appearance > style

---

tooltipByIndex

A list of tooltips for each item, by index.

Type	array
Array values	string
Configurability	Read-only
Default	[]

Examples

["Tooltip 1", "Tooltip 2"]

---

tooltipText

The tooltip text to display next to the label on hover.

Type	string
Format	Markdown
Configurability	Inspector > Content > Add-ons > Helper text
Default	null

Examples

Submit

---

transition

The transition animation used when switching views.

Type	string
Configurability	Read-only
Allowed Values	Value Description none No animation. fade Views fade in and out. slide Views slide in and out.

---

viewKeys

A list of view keys.

Type	array
Array values	string
Configurability	Read-only

---

views

A list of views configured for the container.

Type	array
Array values	object
Configurability	Read-only

Array Object Properties

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Disabled
Default	false

Examples

true

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Hidden
Default	false

Examples

true

---

icon

The prefix icon to display.

Type	string
Format	Icon Key
Configurability	Inspector > Content > Add-ons > Prefix icon
Default	null

Examples

/icon:bold/shopping-gift

---

iconPosition

The position of the icon relative to the text.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Icon position
Allowed Values	Value UI Option Description left Left Left of text. right Right Right of text. replace Replace text Replace text.
Default	left

Examples

left

---

key

The view key.

Type	string
Configurability	Read-only

---

label

The text label to display.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Label > Label
Default	null

Examples

"Label"

---

tooltip

The tooltip text to display next to the label on hover.

Type	string
Format	Markdown
Configurability	Inspector > Content > Add-ons > Tooltip

---

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

container.scrollIntoView()

Scrolls the canvas or parent container so that the selected component appears in the visible area.

Definition

container.scrollIntoView(options)

Parameters

options

The scroll options.

Type

object

Object Properties

behavior

The scroll behavior.

Type	string
Allowed Values	Value Description auto Scroll immediately to the specified position. smooth Scroll gradually to the specified position.

---

block

The scroll position relative to the component.

Type	string
Allowed Values	Value Description nearest Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view. start Scrolls to position the component at the top of the visible area. center Scrolls to position the component in the middle of the visible area. end Scrolls to position the component at the bottom of the visible area.

---

---

Examples

Scroll the minimum amount to immediately bring container into view.

container.scrollIntoView({behavior: 'auto', block: 'nearest'});

---

container.setCurrentView()

Set the current view of the container by key.

Definition

container.setCurrentView(key)

Parameters

key

The key.

Type

string

---

Examples

Set the current view of container to userView.

container.setCurrentView(userView);

---

container.setCurrentViewIndex()

Set the current view of the container by index.

Definition

container.setCurrentViewIndex(index)

Parameters

index

The index of an item.

Type

number

---

Examples

Set the current view of container to index 1.

container.setCurrentViewIndex(1);

---

container.setDisabled()

Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.

Definition

container.setDisabled(disabled)

Parameters

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Disable container.

container.setDisabled(true);

Enable container.

container.setDisabled(false);

---

container.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

container.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide container.

container.setHidden(true);

Unhide container.

container.setHidden(false);

---

container.setShowBody()

Set the showBody value to toggle whether the component body is visible.

Definition

container.setShowBody(showBody)

Parameters

showBody

Whether to show the body.

Type

boolean

---

Examples

Show the body of container.

container.setShowBody(true);

Hide the body of container.

container.setShowBody(false);

---

container.setShowFooter()

Set the showFooter value to toggle whether the component footer is visible.

Definition

container.setShowFooter(showFooter)

Parameters

showFooter

Whether to show the footer area.

Type

boolean

---

Examples

Show the footer of container.

container.setShowFooter(true);

Hide the footer of container.

container.setShowFooter(false);

---

container.setShowHeader()

Set the showHeader value to toggle whether the component header is visible.

Definition

container.setShowHeader(showHeader)

Parameters

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Show the header of container.

container.setShowHeader(true);

Hide the header of container.

container.setShowHeader(false);

---

container.showNextView()

Show the next view of the container.

Definition

container.showNextView()

---

container.showNextVisibleView()

Show the next visible view of the container.

Definition

container.showNextVisibleView()

---

container.showPreviousView()

Show the previous view of the container.

Definition

container.showPreviousView()

---

container.showPreviousVisibleView()

Show the previous visible view of the container.

Definition

container.showPreviousVisibleView()

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description
Change	The value is changed.
Click	An item is clicked or pressed.