Mobile: Sheet

A sheet is a container that slides up from the bottom of a native mobile view, sitting above the current content while keeping it partially visible. Sheets are used for focused interactions that don't require leaving the current screen, such as filters, forms, or contextual details.

Sheets are similar to modals, but with an important difference: sheets are best when the context of the view behind them is still relevant. A map app displaying search results in a sheet is a classic example — users can scroll through results while continuing to see the map underneath.

Sheets are added directly to a view, functioning much like popups on the web.

Sheets work well for:

Sheets and modals both provide focused, temporary experiences on top of a view, but they serve different purposes:

Use a sheet when the user benefits from seeing the underlying view. Use a modal when the task requires the user's full focus.

Sheets sit above the view content in their own layer. They can partially or fully cover the screen, depending on the size the user drags them to. Because the underlying view often stays visible, sheets are a natural way to show additional information without breaking the user's focus.

Sheets can hold any elements a regular group can, including forms, images, buttons, and other containers.

The View type property determines how the sheet handles scrolling and content layout. By default, the sheet behaves like a group, acting as a container where you can add and manage elements freely.

When you set the view type to Vertical list or Section list, a pseudo child element is added to the element tree containing that list. Each list has its own data source, independent of the sheet's data source, letting you combine a single-record sheet with a list of items in the same layout.

Sheets can hold a data source, just like a regular group. This makes it easy to open a sheet with a specific piece of data loaded, such as showing details for the item a user just tapped.

Sheets, like views, support horizontal lists and section lists. Enabling either through the View type property adds it as a pseudo child element with its own separate list data source.

The sheet itself keeps its original single-record data source, which can still be referenced by other child elements. This lets you customize the horizontal or section list's data source to reflect the sheet's parent data, connecting the two without giving up either one.

Set the sheet's Type of content and Data source directly. The sheet loads its data as soon as it's shown, based on an expression like Current User.

Use the Display data in a group action to load data in response to a user action, such as tapping an item in a list.

Sheets are opened with the Show element action. Bubble applies a native slide-up animation automatically, giving the sheet the familiar mobile feel.

To close a sheet, either use the Hide an element action or let the user dismiss it by swiping down (when Swipe to close is enabled).

Snap points define the sizes a sheet can settle at. When you set snap points, users can drag the sheet up or down to switch between them, and the sheet snaps to the nearest one when released.

Each sheet has a default snap point that determines the size it opens to. Snap points are especially useful for sheets with a lot of content, or for scenarios where users may want to move the sheet out of the way to interact with what's behind it.

Sheets support several properties for controlling how the background of the view appears when the sheet is open. These are UI settings only and shouldn't be relied on for security.

Block interaction behind sheet

When enabled, users can't interact with the content behind the sheet. This is similar to the behavior of a popup on the web, and is useful when the sheet requires the user's full attention.

Backdrop color

Applies a solid color over the underlying view when the sheet is open, drawing focus to the sheet by dimming or tinting the background.

Backdrop blur

Applies a blurred overlay over the underlying view when the sheet is open, softening the background without hiding it entirely.

Sheets include a few properties for controlling how users can interact with them:

Swipe to close

When enabled, users can swipe the sheet downward to close it. Disabling this is useful when the sheet should only be dismissed by a specific button, such as a Cancel or Save action.

Drag handle

Shows a small horizontal bar at the top of the sheet, giving users a visual cue that the sheet can be dragged.

Sheets can be styled like any other container. The top edge of a sheet often uses rounded corners to create the familiar "card sliding up" appearance common in mobile apps.

You can style individual sheets by adjusting their different properties, or by connecting them to predefined styles and/or style variables.

Sheets are a visual layer, not a security boundary. The elements behind a sheet are still present in the app's client-side code, and blocking interaction or blurring the background is a UI effect only.

Never rely on a sheet to hide sensitive information. Use privacy rules in the database and server-side conditions to control security.