Choice blocks let users make selections and are key for collecting structured input in your flow. There are two types:
- Multiple Choice → Users pick from text-based options. Perfect for quick questions, surveys, or branching logic.
- Image Choice → Users select an option by clicking on an image. Great for visual quizzes, product showcases, or more engaging interactions.
Multiple Choice Block
With the multiple choice block, you are able to provide a range of predefined answers to your questions. This block is similar to Picture Choice which additionally provides you with the option to make it more intuitive by adding images and icons to an answer.
Multiple Choice – General
When you add a Multiple Choice block, the General tab will open by default.
Here you’ll see three key settings:
- Name → The field name that stores the user’s choice.
- The name attribute is also used to send data to your CRM, so it must be unique across the entire flow.
- You can also reuse the name as a variable in later steps (e.g., {{Financing}}).
Label → The text label for your choices. This is optional and usually used for extra context.
Options → Each option has three parts:
- Icon/Image → Add an emoji or small icon. (Tip: If you want bigger visuals, use the Image Choice block instead.)
- Display Name → What the user sees in the flow (e.g., United States of America).
- Value → The data that’s actually sent to your CRM. By default, this matches the Display Name, but you can customize it.
Example: Show the user United States of America but store it as USA in your CRM.
You can reorder options anytime by dragging them with the handle at the beginning of the row. You can also add or remove options freely (by default, 4 options are created).
Multiple Choice – Settings
After the General section, you’ll find additional options under Settings that control how your choices behave:
- Allow Multiple Selection → Lets users select more than one option instead of just one.
- Note: When multiple selection is enabled, users must click a button to continue. Navigation on option click will not work.
- Sort Alphabetically → Automatically arranges options from A–Z.
- Reverse Order → Flips the order of your options (useful if you want the last option to appear first).
- Randomize → Shuffles the order of options every time the flow is loaded, which is great for unbiased surveys or quizzes.
💡 Tip: Be careful with Randomize if you’re mapping options to a CRM – the values remain correct, but the order users see will change each time.
Multiple Choice – Navigation & Validation
Both Navigation and Validation settings are available for Multiple Choice blocks, right under the General and Settings sections.
- Navigation → Controls where the visitor goes after making a choice.
- Validation → Ensures the visitor selects an option before continuing.
Multiple Choice – Decorators
The Decorators section adds extra options to improve the user experience:
- Multiple Selection Separator → Defines how values are separated when users pick more than one option (e.g., comma ,, semicolon ;, or slash /). This is especially important if the data is being passed to your CRM.
- Help Text → Displays a small info text below the block to guide users. This is useful when the question needs clarification (e.g., “Select all that apply”).
💡 Tip: Use Help Text to prevent confusion – it works like a hint that supports the user without making the flow feel heavy.
Multiple Choice – Spacing
The Spacing section lets you control the size and positioning of the block:
- Size → Choose how wide the block should be:
- S (Small)
- M (Medium, default)
- L (Large)
- Full (takes the entire width of the step)
- Margin → Adjust the space around the block (top, bottom, left, right) in pixels.
💡 Tip: Use spacing to keep your layout balanced. For example, adding more top margin can create breathing room between your headline and choice block.
Multiple Choice – Appearance
The Appearance section controls how your choices are displayed on desktop and mobile:
- Layout Type → Choose between a grid layout (options side by side) or a list layout (stacked vertically).
- Items Per Row → Define how many options appear per row on desktop (1–6).
- Items Per Row Mobile → Define how many options appear per row on mobile (1–6).
- Align Options → Align the choice buttons to the left, center, or right within their row.
- Text Align → Align the text inside the buttons (left, center, right).
- Visibility → Control whether the block is shown on desktop, mobile, or both.
Multiple Choice Design
The design of Multiple Choice blocks works with presets to keep your flow consistent. LanderLab provides ready-made templates that define how options look in their different states:
- Idle → How the option looks before being selected.
- Selected → How the option looks after the user clicks it.
You can scroll through the available presets and pick one that matches your flow.
If you need more control, use the Advanced Settings located below the preview. Here you’ll find four editable states:
- Base Styles → General styling like font size, border width, corner radius, media size, and spacing.
- Default → The option’s normal look.
- Hover → How the option looks when a user hovers over it.
- Selected → How the option looks when chosen.
Image Choice Block
The Image Choice Block works the same way as the Multiple Choice Block, but instead of plain text, users select from images. This makes it especially useful while visuals help users decide faster.
General
- Name → The unique field name used to store the answer and send it to your CRM. It should be unique across the flow and can also be used as a variable later.
- Label → Optional text shown above the images for extra context.
- Options → Each option has three parts:
- Image → Upload or select the image you want displayed.
- Display Name → The text shown under or beside the image.
- Value → The value sent to your CRM. By default, this copies the Display Name, but you can customize it (e.g., show United States of America but send USA).
Settings
- Allow Multiple Selection → Lets users pick more than one image. (⚠️ Requires a button to continue, as navigation on click won’t work.)
- Sort Alphabetically → Sorts options by name A–Z.
- Reverse Order → Displays options in reverse order.
- Randomize → Shuffles image order each time the flow loads.
Navigation & Validation
Both are supported for Image Choice just like Multiple Choice:
- Navigation → Control what step comes next, or use conditional logic to branch paths.
- Validation → Ensure at least one option is selected before moving forward. 👉 Full details can be found in the dedicated Navigation and Validation articles.
Decorators
- Multiple Selection Separator → Defines how multiple selected values are separated (comma, semicolon, etc.).
- Help Text → Adds an info tooltip note under the block to guide the user.
Spacing & Appearance
- Spacing → Control block width (S, M, L, Full) and set margins around it.
- Appearance → Choose layout type (grid or list), number of items per row (desktop & mobile), alignment, and visibility on desktop/mobile.
Design
Just like Multiple Choice, you can use:
- Presets → Ready-to-use styles for consistency.
- Advanced Settings → Customize idle, hover, and selected states, plus fonts, borders, corner rounding, and media size.
💡 Note: Use Image Choice when visuals make the user’s decision easier or more engaging. For plain text options, stick with Multiple Choice.