> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getflowpilot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Blocks

> Curated multi-component presets that drop in pre-wired, often creating the variables and actions for you.

A block is a ready-made pattern built from [components](/editor/components): a whole choice screen, a gated continue button, a hero section, a testimonial card. Instead of placing primitives one by one, you pick a block and it drops in fully assembled. Many blocks also wire themselves up for you by creating a backing [variable](/editor/variables) and the [conditional values](/editor/dynamic-values) that style or gate the result.

Blocks are a starting point. Once a block is inserted it expands into normal components that you can edit, restyle, and delete freely. It does not stay "linked" to the preset.

<Note>
  This page describes the **Blocks** list in [Advanced mode](/editor/editing-modes), the full catalog. In [Simple mode](/editor/editing-modes), Insert shows an **Elements** tab: the [Element Library](/editor/element-library), a visual two-pane browser limited to **certified** blocks (the subset verified to render identically across the canvas, iOS, and Expo). The catalog has grown alongside the certified set: it now also includes Title, Subtitle, Normal Text, Rich Text, Image, Lottie, Rating, more input types (Long Text, Phone, Number, Password), Hero, Review, Analysis Loader, six button styles, container blocks (Columns, Rows, Carousel), Comparison Chart, and App Rating Ask. See the [Element Library](/editor/element-library) for the certified set, names, and variants.
</Note>

## How to add a block

<Steps>
  <Step title="Select a screen">
    Blocks insert into the selected screen, so a screen must be selected. Until then the panel shows "Select a screen to add blocks".
  </Step>

  <Step title="Open Insert > Blocks (or Screens)">
    In the left sidebar click **Insert**. **Blocks** holds everything that drops into the current screen. **Screens** holds full-screen templates (covered below). A **Recently Used** group appears in Blocks once you have inserted a few.
  </Step>

  <Step title="Pick a block">
    Click a block. If it has a **wizard**, a dialog opens so you can fill in labels, options, and a variable name; click **Insert Block** to finish. Blocks without a wizard insert immediately.
  </Step>
</Steps>

<Note>
  A block inserts as a sibling right after the currently selected component, or into the screen's Root Stack if nothing inside the screen is selected. Full-screen templates from the **Screens** tab replace the screen's contents (you are asked to confirm if the screen already has content).
</Note>

## The block catalog

Blocks are organized into the categories below. Wizards let you customize labels and variable names before inserting; where a block "auto-creates" a variable, the wizard's **Variable name** field is optional and defaults to a generated name.

### Selection

For "pick one" or "pick many" questions. Each option's tap writes to a bound variable, and the selected option is highlighted with a conditional background and border.

| Block                  | What it inserts                                              | Auto-creates                                                                | Wizard |
| ---------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------- | ------ |
| **Single Choice List** | A vertical list of selectable options bound to one variable. | A `string` variable (`choice_*`). Each option's `onPress` sets it.          | Yes    |
| **Multi Choice List**  | A list where several options can be selected at once.        | A `list` variable (`choices_*`). Each option toggles its value in the list. | Yes    |
| **Choice Grid**        | A 2-column grid of selectable option cards.                  | A `string` variable (`choice_*`).                                           | Yes    |
| **Choice Chips**       | A wrapping row of selectable tag chips.                      | A `list` variable (`choices_*`). Chips toggle on and off.                   | Yes    |

### Navigation

Continue and skip patterns. A "gated" button stays disabled (and dimmed to 0.5 opacity) until its gate variable has a value.

| Block                     | What it inserts                                                                                            | Auto-creates                                                                                       | Wizard |
| ------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------ |
| **Gated Continue**        | A Continue button disabled until a choice is made. On press it clears the gate variable and runs `goNext`. | Nothing. It binds to an existing variable (the wizard auto-detects choice variables in your flow). | Yes    |
| **Skip + Continue**       | A two-button row: Skip (secondary) and Continue (primary). Both run `goNext`.                              | Nothing.                                                                                           | No     |
| **Gated Skip + Continue** | A row where Skip always works and Continue is gated on a variable.                                         | Nothing. It binds to an existing variable.                                                         | Yes    |

### Chrome

Back, close, and progress. These are meant for the persistent [zones](/editor/zones) (navigation bar, footer), not the body of a screen.

| Block            | What it inserts                                                                                               | Auto-creates | Wizard |
| ---------------- | ------------------------------------------------------------------------------------------------------------- | ------------ | ------ |
| **Back Button**  | A button (chevron icon) whose `onPress` runs `goBack`.                                                        | Nothing.     | No     |
| **Close Button** | A button (X icon) whose `onPress` runs `closeFlow`.                                                           | Nothing.     | No     |
| **Progress Bar** | A `progress` component in `auto` mode that tracks flow progress. This is how you add the linear progress bar. | Nothing.     | No     |

### Content

Display patterns made of text, images, and icons. None create variables.

| Block                 | What it inserts                                                                                                                                    | Wizard |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| **Card**              | A surface container (a styled stack with padding, rounded corners, and a shadow) holding a title and body text. Replaces the old `card` primitive. | No     |
| **Chip**              | A pill-shaped label (a styled stack). Replaces the old `chip` primitive.                                                                           | No     |
| **Hero Section**      | An image with a title and subtitle.                                                                                                                | No     |
| **Feature Highlight** | A row with an icon, a title, and a description.                                                                                                    | No     |
| **Benefit List**      | Three feature rows, each with an icon, title, and description.                                                                                     | No     |
| **Step Indicator**    | A numbered step badge with a "Step 1 of 3" style label.                                                                                            | No     |

### Input

Form fields bound to variables for collecting user input.

| Block                | What it inserts                                                                               | Auto-creates                           | Wizard |
| -------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------- | ------ |
| **Text Input**       | A labeled text field.                                                                         | A `string` variable (`input_*`).       | Yes    |
| **Email Input**      | A labeled email field.                                                                        | A `string` variable (`input_email_*`). | Yes    |
| **Multi-Field Form** | Several labeled fields stacked vertically.                                                    | One `string` variable per field.       | Yes    |
| **Checkbox**         | A tappable row whose icon swaps between checked and unchecked. On press it toggles a boolean. | A `boolean` variable (`checkbox_*`).   | Yes    |

### Social Proof

Trust and credibility patterns. None create variables.

| Block                | What it inserts                                                 | Wizard |
| -------------------- | --------------------------------------------------------------- | ------ |
| **Testimonial Card** | A quote with an avatar, name, and title.                        | No     |
| **Stat Counter**     | A large number with a label, for "Join 50,000+ users" patterns. | No     |
| **Rating Badge**     | A star rating with a score and review count.                    | No     |

### Screens (the Screens tab)

Full-screen templates that build out an entire screen at once. These live in the **Screens** inner tab, not Blocks. Applying one to a screen that already has content asks you to confirm before replacing it.

| Template             | What it builds                                                                        | Auto-creates                                                          | Wizard |
| -------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------ |
| **Choice Screen**    | Title, subtitle, single-choice list, and a gated Continue button, all wired together. | A `string` variable (`choice_*`); the Continue button is gated on it. | Yes    |
| **Welcome Screen**   | A hero image, title, subtitle, and a Get Started button (`goNext`).                   | Nothing.                                                              | Yes    |
| **Input Collection** | Title, subtitle, form fields, and a Continue button.                                  | One `string` variable per field (`input_*`).                          | Yes    |
| **Feature Tour**     | Title, subtitle, a three-item benefit list, and a Continue button.                    | Nothing.                                                              | Yes    |
| **Social Proof**     | Title, subtitle, a stats row, a testimonial card, and a Continue button.              | Nothing.                                                              | Yes    |

## How auto-wiring works

When a block creates a variable, it also creates the [conditional values](/editor/dynamic-values) that read it. For example, a **Single Choice List** option uses a conditional background color: "when `choice_x` equals `option_2`, use the selected color, else the default". A **Gated Continue** button uses a conditional `disabled` value: "when the gate variable is empty, disabled is true".

That is why the variable name matters. If you rename the variable a block created without updating the components that read it, the highlighting and gating stop working. Edit the variable name in the wizard before inserting, or rename consistently afterward in the [Variables](/editor/variables) panel.

## Example: a gated choice screen, the manual way

The **Choice Screen** template does all of this in one click, but it helps to see the pieces:

1. Insert a **Single Choice List** block. It creates a `string` variable, say `choice_a1b2`, and a list of options that each set it on tap.
2. Insert a **Gated Continue** block below it. In its wizard, set **Gate variable** to `choice_a1b2` (the wizard usually auto-detects it).
3. Now the Continue button is disabled and dimmed until the user selects an option, then enables and runs `goNext`.

## Common mistakes

* **Inserting Gated Continue with no choice variable.** The button has nothing to gate on and stays disabled forever. Add a choice block first. The wizard warns "No choice variables detected" when it cannot find one.
* **Renaming an auto-created variable without updating its bindings.** The conditional styling and gating still point at the old key. Rename in the wizard, or update every reference in the Variables panel.
* **Expecting a block to stay linked to the preset.** It does not. On insert it expands into normal components. Editing it never changes the original block.
* **Putting chrome blocks in a screen.** Back, Close, and Progress Bar belong in [zones](/editor/zones) so they persist across screens. Placing them in the screen body works but they will not stay put as the user moves through the flow.
* **Applying a Screen template over real work.** Screen templates replace the screen's contents. Confirm the replace prompt only if you mean to start over.

## Related pages

* [The Element Library (Simple)](/editor/element-library)
* [Components](/editor/components)
* [Variables](/editor/variables)
* [Dynamic (conditional) values](/editor/dynamic-values)
* [Persistent zones](/editor/zones)
* [Custom components](/editor/custom-components)