Tab Container


While similar to the Tab Set component, the Tab Container differs in two ways:

  • You cannot adjust the spacing between the tabs in a Tab Container.
  • Where there is not enough space to display all of the tabs in a Tab Container, the component renders as an accordion, with tabs stacked vertically atop one another. (The Tab Set component, on the other hand, displays overflow tabs in a dropdown menu.)

In general, unless there is a specific design requirement that can only be addressed by using the Tab Container, Skuid recommends using the Tab Set.

A layout component, the Tab Container is used to group other components within tabs that end users click; when opened, these tabs display features and data. Skuid components can be organized within specific tabs in the Tab Container.


Only one vertical tab can be open at a time.

Using the Tab Container Component

The Tab Container allows end users to switch between sets of data or visualizations with a click. Tabs can be used as guides for inputting or updating information, making applications more intuitive, and reducing time spent scrolling or clicking through an app.

Add a Tab Container to the page, then equip it with tabs, and fill the tabs with components.

Add Tabs

  • Add tabs by clicking Add tab on the Tab Container.
    • The Tab Container defaults to one tab.
  • Remove tabs by clicking on the tab, then clicking Remove.
  • Reposition tabs by clicking and dragging them left or right to the desired location in the set.

Add Components to Tabs

  • Add components by clicking and dragging desired components into a tab within the Tab Container. Component properties can then be modified as usual to adjust appearance and behavior.


Adding a Tab Container component to a tab will create a set of subtabs.


(Just need to look up a property? Try going directly to the Property Library.)

Component properties

General tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
  • Remember active tab: If true, Skuid’s personalization framework will remember the last tab an end user was on and will automatically reopen that tab when the user returns to this page.
  • Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.


If no Aria Label is specified, access technologies will use the Tab label.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.


    To refresh available style variant options, click refresh Refresh style variants.

    This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Margin: Sets a component’s margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate Separate.

    Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Tab container height section

  • Height Strategy: Sets the way height is determined. Values are set using a number and a sizing unit.

    • Fit to Content: Height adjusts based on what’s needed to fit nested elements.

      • Min height (optional): The minimum height, even when accounting for nested elements.
      • Max height (optional): The maximum height, even when accounting for nested elements.
    • Fixed Height: Sets an absolute height.

      • Height: The absolute height to render at.
  • Width strategy: Sets the way width is determined. Values are set using a number and a sizing unit.

    • Fill available space: Width stretches horizontally to the edge of the next parent container—whether that be another component or the entire page

      • Min width (optional): The minimum width, even when accounting for nested elements.
      • Max width (optional): The maximum width, even when accounting for nested elements.
    • Fixed width: Sets an absolute width.

      • Width: The absolute width to render at.
  • Overflow x-axis and Overflow y-axis: Determines how to handle nested elements that overflow from within horizontally (x-axis) and vertically (y-axis). These properties and their values mirror their CSS property equivalents

    • Auto: Elements that overflow are clipped and scrollable, but scrollbars only display when elements overflow.

    • Scroll: Elements that overflow are clipped and scrollable, and scrollbars display regardless of whether or not elements overflow.


      macOS may hide scrollbars regardless of this value, depending on the user’s operating system settings.

    • Hide: Elements that overflow are clipped and inaccessible to the user.

    • Visible: Elements that overflow spill outside of the component without adding a scrollbar.

Display logic tab [[]]

Standard display logic options are available to display or hide the component or feature.

Nested elements

Tab properties
General tab [[]]
  • Tab label: The text that appears as the tab’s title in the component. Defaults to “New Tab.”
  • Icon (optional): A visual icon that will appear beside the tab label. Commonly used to guide users to relevant information more quickly. Click warning to open the library of available icons.
  • Change order: Adjusts the left/right order of the tab within the component. Click arrow-left to move a tab to the left, and click arrow-right to move a tab to the right.
Advanced tab [[]]
  • Tab panel unique Id (optional). Allows for a tab’s content panel to be reliably referenced via JavaScript or set via a URL hash, such as apex/skuid_UI?page=AccountDetail#CasesTab.
Actions tab [[]]

Use these properties to add actions to individual tabs on the Tab Container.

  • When first shown: Actions will only run the first time an end user selects this Tab on page load.
  • Whenever rendered: Actions will run every time an end user selects this Tab.

Click add Add action, then select:

Display logic tab [[]]

Standard display logic options are available to display or hide the component or feature.