The Stack component for Retool Apps

A container to group other components together in a flexbox layout.

Version: Cloud and 3.188 Edge

Demo

For more information about using the Stack 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
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers
Default	false

Examples

true

---

currentViewIndex

The index of the selected view.

Type	number
Format	Integer
Mutability	Read-only
Default	null

Examples

3

---

currentViewKey

The key value of the selected view.

Type	string
Format	Plain Text
Mutability	Read-only
Default	null

Examples

"view1"

---

disabled

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

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Disabled Method setDisabled()
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
Mutability	Read-only
Default	[]

Examples

[true, false, true]

---

enableFullBleed

Whether to expand the contents to fill available space.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Expand contents to fit
Default	false

Examples

true

---

footerPadding

The amount of padding used within the footer.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI 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
Mutability	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
Mutability	Control Usage Retool UI Inspector > Interaction > Hoist loading state
Default	false

Examples

true

---

hovered

Whether the component is currently hovered.

Type	boolean
Format	True/False
Mutability	Read-only

Examples

true

---

iconByIndex

A list of icons for each item, by index.

Type	array
Array values	string
Mutability	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
Mutability	Read-only
Allowed Values	Value Description left Left. right Right.

---

id

The unique identifier (name).

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector
Default	stack1

Examples

query1

button1

---

isHiddenOnDesktop

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

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Show on mobile
Default	true

Examples

true

---

itemMode

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

Type	string
Mutability	Control Usage Retool UI 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
Mutability	Read-only
Default	[]

Examples

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

---

loading

Whether to display a loading indicator.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Maintain space when hidden
Default	false

Examples

true

---

margin

The amount of margin to render outside.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI 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
Mutability	Read-only

---

showBorder

Whether to show a border.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Show border
Default	false

Examples

true

---

showFooter

Whether to show the footer area.

Type	boolean
Mutability	Control Usage Retool UI Inspector Method setShowFooter()

---

showFooterBorder

Whether to show a border above the footer.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Footer > Appearance > Show separator

Examples

true

---

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Header > Appearance > Show header Method setShowHeader()
Default	false

Examples

true

---

showHeaderBorder

Whether to show a border under the header.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI Inspector > Appearance > Advanced > Always show in edit mode
Default	false

Examples

true

---

style

Custom style options.

Type	object
Mutability	Control Usage Retool UI Inspector > Appearance > style

---

tooltipByIndex

A list of tooltips for each item, by index.

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

Examples

["Tooltip 1", "Tooltip 2"]

---

tooltipText

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

Type	string
Format	Markdown
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Helper text
Default	null

Examples

Submit

---

transition

The transition animation used when switching views.

Type	string
Mutability	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
Mutability	Read-only

---

views

A list of views configured for the container.

Type	array
Array values	object
Mutability	Read-only

Array Object Properties

disabled

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

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Disabled Method setDisabled()
Default	false

Examples

true

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Hidden Method setHidden()
Default	false

Examples

true

---

icon

The prefix icon to display.

Type	string
Format	Icon Key
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI 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
Mutability	Read-only

---

label

The text label to display.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI 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
Mutability	Control Usage Retool UI 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.

stack.scrollIntoView()

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

Definition

stack.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 stack into view.

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

---

stack.setCurrentView()

Set the current view of the container by key.

Definition

stack.setCurrentView(key)

Parameters

key

The key of the selected item.

Type

string

---

Examples

Set the current view of stack to userView.

stack.setCurrentView(userView);

---

stack.setCurrentViewIndex()

Set the current view of the container by index.

Definition

stack.setCurrentViewIndex(index)

Parameters

index

The index of an item.

Type

number

---

Examples

Set the current view of stack to index 1.

stack.setCurrentViewIndex(1);

---

stack.setDisabled()

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

Definition

stack.setDisabled(disabled)

Parameters

disabled

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

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Disable stack.

stack.setDisabled(true);

Enable stack.

stack.setDisabled(false);

---

stack.setHidden()

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

Definition

stack.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide stack.

stack.setHidden(true);

Unhide stack.

stack.setHidden(false);

---

stack.setShowBody()

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

Definition

stack.setShowBody(showBody)

Parameters

showBody

Whether to show the body.

Type

boolean

---

Examples

Show the body of stack.

stack.setShowBody(true);

Hide the body of stack.

stack.setShowBody(false);

---

stack.setShowFooter()

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

Definition

stack.setShowFooter(showFooter)

Parameters

showFooter

Whether to show the footer area.

Type

boolean

---

Examples

Show the footer of stack.

stack.setShowFooter(true);

Hide the footer of stack.

stack.setShowFooter(false);

---

stack.setShowHeader()

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

Definition

stack.setShowHeader(showHeader)

Parameters

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Show the header of stack.

stack.setShowHeader(true);

Hide the header of stack.

stack.setShowHeader(false);

---

stack.showNextView()

Show the next view of the container.

Definition

stack.showNextView()

---

stack.showNextVisibleView()

Show the next visible view of the container.

Definition

stack.showNextVisibleView()

---

stack.showPreviousView()

Show the previous view of the container.

Definition

stack.showPreviousView()

---

stack.showPreviousVisibleView()

Show the previous visible view of the container.

Definition

stack.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.