---
title: "Elements"
description: "All visual elements available in the Flow Builder: layout containers, text, media, lists, buttons, inputs, products, and more."
---

To open the element library and add a new element to a screen, click the plus button Plus in the left panel or above the device preview.

Elements fall into the following categories:
- [Basics](#basics) (layout containers, text, media, lists, badges, check marks)
- [Forms & Quiz](#forms--quiz) (buttons, inputs, quizzes, tabs)
- [Paywall & Commerce](#paywall--commerce) (products, trial toggle, user engagement, countdown)
- [Progress indicators](#progress) and loaders

For each element, Adapty offers multiple presets — templates with placeholder content or pre-defined interactions.

## Basics

### Layout

:::link
Main article: [Layout Elements](builder-containers)
:::

Layout elements are containers that organize elements inside them.

- **Vertical Stack**: arranges child elements from top to bottom
- **Horizontal Stack**: arranges child elements from left to right
- **Dividers (horizontal and vertical)**: lines that visually separate content sections
- **Carousel**: a swipeable container
- **Bottom Sheet**: a slide-up panel anchored to the bottom of the screen

### Text

:::link
Main article: [Text content](onboarding-text)
:::

Text can be static or include [variables](onboarding-variables) (e.g., user name) and [localized content](paywall-localization).

The following text presets come standard. To change this list, add or remove [saved text styles](builder-styling#reusable-styles):

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label

### Media

:::link
Main article: [Images, videos, and icons](custom-media)
:::

:::note
This section describes foreground media elements. Change the [screen background](paywall-layout-and-products#screen-background) to fill the entire screen with an image or a video.
:::

- **Icon**: a vector icon from the built-in icon library, with customizable size and color
- **Image**: an image — upload your own or provide a URL
- **Video**: An embedded video player for files up to 50MB. Supports looping.

### List

List elements organize content into rows and columns to display uniformly formatted data. Under the hood, a list is a [stack](manage-paywall-ui-elements#layout).

- **Icon List**: rows with a leading icon and text label
- **Timeline**: vertical sequence with connected step indicators
- **Image List**: rows with a leading image and text
- **Icon Cards**: grid of cards with centered icons
- **Image Cards**: grid of cards with images
- **Comparison Table**: multi-column table comparing features across plans (e.g., Free vs Pro)

### Badge

A small overlay label to highlight an element — typically used to promote discounts or specific plans (e.g., "Save 5%"). Use [absolute positioning](manage-paywall-ui-elements#absolute) to place a badge over a different element.

### Checkmarks

Selection indicator icons for use inside [selectable elements](flow-selectable-elements). Each checkmark preset includes an on and off state that updates automatically based on user selection.

- Checkbox
- Circle
- Radiobutton
- Toggle

## Forms & Quiz

### Buttons

:::link
Main article: [Buttons](paywall-buttons)
:::

Buttons trigger actions when tapped — navigating to another screen, opening a URL, or dismissing the flow.

Every preset is a starting point — restyle it and assign any action. Configure button behavior in the [Interactions](builder-ui#interactions-properties) tab.

- **Base**: regular button with centered text
- **Right Icon**: button with an icon on the right side
- **With Subtitle**: includes two lines of text
- **Pulse Animation**: includes an animated pulse effect
- **Purchase**: triggers a purchase
- **Secondary Outline**: outlined button for secondary actions
- **Back**: navigate to the previous screen
- **Close flow**: exit the flow
- **View more plans**: reveal additional product options
- **Links**: footer links

### Inputs

:::link
Main article: [Inputs and forms](builder-inputs-and-forms)
:::

Input fields allow users to enter data. Each enforces an appropriate input method and validation rules.

- Text
- E-mail
- Password
- Number
- Phone number
- Date
- Time
- Date & Time

Date, Time, and Date & Time inputs open the device's native picker (wheel or calendar) when tapped.

Use [variables](onboarding-variables) to process user input and influence conditional logic.

### Quizzes

:::link
Main article: [Surveys and quizzes](onboarding-quizzes)
:::

Quiz elements present multi-option selection screens for surveys, preference collection, and user segmentation. Set up [interactions](onboarding-navigation-branching) to branch the flow based on the user's answer.

- **Icon Options**: single-column list with icons
- **Emoji Options**: single-column list with emojis
- **Image Options**: single-column list with images
- **Icon Grid**: multi-column grid with icons
- **Emoji Grid**: multi-column grid with emojis
- **Image Grid**: multi-column grid with photos
- **Rating**: numbered scale (e.g., 1–5)

### Tabs

:::link
Main article: [Tabs](builder-tabs)
:::

Tabs split a screen section into switchable content panels. The user selects a tab, and the content below updates to match. Commonly used for grouping product plans or toggling between monthly and yearly pricing.

- **Segment control**: pill-shaped switcher with rounded corners around the selected tab
- **Button Tabs**: separate button-styled tabs
- **Underline**: text labels with an underline marking the selected tab

## Paywall & Commerce

### Products

:::link
Main article: [Products](paywall-product-block)
:::

Product elements display in-app purchase details and handle product selection. Each preset arranges product data in a different layout. Link your products to populate the elements with real data from Adapty.

- **Vertical List**: stacked product cards
- **Horizontal List**: side-by-side product cards
- **Feature Carousel**: swipe-able cards with feature checklists
- **Feature Cards**: static cards with feature checklists
- **Banner List**: compact rows with inline badges
{/* Not sure if will ship in v1 - **Bottom Sheet**: product selector inside a slide-up panel */}

### Trial toggle

:::link
Main article: [Toggles](builder-toggles)
:::

A toggle that switches the displayed product between its standard price and its free trial offer. When activated, the product selection and element state updates automatically.

### User engagement

Pre-styled blocks with user ratings that build trust and encourage conversion. The templates are basic containers with placeholder content.

- **Review**: a star rating with a review and the reviewer's name
- **Rating**: a numeric score with star display
- **App Rating**: a large score with a star bar and a review count
- **Social Proof**: an avatar stack with a user count

### Countdown

:::link
Main article: [Countdown timer](paywall-timer)
:::

Displays hours, minutes, and seconds ticking down to zero. Use it to create urgency for limited-time offers. The timer can trigger actions upon reaching zero — such as navigating to another screen or hiding the discount badge.

- **Inline**: compact numeric display
- **Inline with units**: numeric display with unit labels
- **Badge**: small highlighted timer overlay
- **Blocks**: separate cards for days, hours, minutes, and seconds

## Progress

:::link
Main article: [Loaders and progress bars](builder-loaders-and-progress-bars)
:::

### Progress indicators

Step-based progress bars that show the user's position in a multi-screen flow. Useful for onboarding sequences where the user needs to see how many steps remain.

- **Linear**: a single continuous bar that fills as the user progresses
- **Segmented**: a bar divided into discrete segments, one per step
- **Connectors**: numbered step markers joined by short connector lines

### Loaders

Animated loading indicators for transitions. Use loaders when your app processes user data — for example, after a quiz submission.

- **Spinner**: rotating circular indicator
- **Spinner with label**: spinner paired with a text label (e.g., "Loading...")
- **Loader**: horizontal progress bar
{/* - **Loader with label**: progress bar paired with a text label and percentage */}