> For the complete documentation index, see [llms.txt](https://smartui-docs.pixelperfectstudio.mx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartui-docs.pixelperfectstudio.mx/framework-addons/container-behavior.md).
# Container Behavior
Containers are one of the key features SmartUI offers. Although simple, they enable powerful capabilities for better organizing and structuring your UI. They provide complex navigation capabilities unlike other Construct 3 frameworks. Their main purpose is to create an operational context within an object hierarchy, allowing the framework to automatically limit interactions and group objects logically.
SmartUI always operates with a global container handler that delegates operations to lower-level containers as the user navigates. Containers are responsible for handling the [Document Flow](/getting-started/quickstart/document-flow.md).
{% hint style="success" %}
Containers automatically propagate `Set Enabled` calls to all its children.
{% endhint %}
{% hint style="warning" %}
Please be aware that all the children of the **component must have enabled the properties change propagation** for all the attributes: `visible`, `opacity`, `x`, `y`, `width`, `height`, etc. Otherwise, you will have to manually control children's attributes.
{% endhint %}
Properties transformation should be enabled to render children correctly.
{% hint style="success" %}
Containers **can be added to any world object** without restrictions, so that you can decide what best suit your needs. They can also be nested: a container within another container.
{% endhint %}
{% hint style="success" %} **There are no limitations** on adding any object as a child of a container. SmartUI is capable of distinguishing which objects have UI-component capabilities to propagate events among them, without affecting the non-UI components of your hierarchy.
{% endhint %}
## Properties
| **Property** | **Description** |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Enabled` | Enables or Disables the container and all its children. |
| `Index` | Index of the container within layout. Used for focusing the elements in the sequence order. |
| `Invisible Component` | Turns the component opacity to 0 while rendering it to allow invisible interactions. |
| `Focusable` | Marks if the component can have the focus. |
| `Automatic-Color` | Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check. |
| `Name` | Unique name string for identifying the selected container |
| `Auto-focus Child` | Upon receiving focus, it transfers the focus to the immediately available child component. If no valid component is found, it will navigate through the available inner containers to locate the next valid element. |
## Smart UI Container ACEs
Smart UI Container behavior groups UI components, provides focusing abilities and default interactions to navigate within the container and its children components that uses Smart UI behaviors, and handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.
Download
## Actions
***
### `Focus First Element`
Request the focus for the first interactable element of the container.
### `Focus Last Element`
Request the focus for the last interactable element of the container.
### `Set Auto-focus Child`
Indicates if the focus should be passed to the first available child, upon receiving focus.
| **Parameter** | **Description** |
| ------------- | ---------------- |
| `Enabled` | Enabled/Disabled |
### `Set Enabled`
Disable/Enable the Container
| **Parameter** | **Description** |
| ------------- | ---------------- |
| `Enabled` | Enabled/Disabled |
### `Set Focus`
Request the focus for this container
### `Set Focusable`
Sets the component to be able to receive the focus
| **Parameter** | **Description** |
| ------------- | ------------------------------------------ |
| `Focusable` | Flag to allow the component to be focused. |
### `Set Invisible Component`
Turns the component opacity to 0 while rendering it to allow invisible interactions.
| **Parameter** | **Description** |
| --------------------- | ----------------------------------------------------------------- |
| `Invisible Component` | Set if the component processed even if it's invisible: True/False |
### `Set Name`
Sets the name of the container.
| **Parameter** | **Description** |
| ------------- | --------------------- |
| `Name` | Name of the component |
### `Set Sequence`
Sets the sequence index to influence the selection of components.
| **Parameter** | **Description** |
| ------------- | ---------------------------------------------------------------------------------------------- |
| `Index` | Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2. |
## Conditions
***
### `Has Control`
True if the container has the control to navigate over components.
### `Compare Name`
Returns true if the component's name equals the parameter
| **Parameter** | **Description** |
| ------------- | ------------------------------------------ |
| `Name` | Name to compare with the component picked. |
### `Is Enabled`
Returns true if the container is enabled
### `Is Focused`
Returns true if the Container has the focus
### `Is Invisible Component`
Returns true if the Container is configured as an invisible component.
### `On Focus`
Triggered when the container gets the focus
### `On Focus Lost`
Triggered when the container loses focus
## Expressions
***
### `Name`
Component name
**(c) Pixel Perfect Studio 2025**
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://smartui-docs.pixelperfectstudio.mx/framework-addons/container-behavior.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.