flex_radiolist) shows every option at once for mutually exclusive answers.
Business Use Cases
Pricing Tiers
“Which plan would you like?” (e.g., Basic, Pro, Enterprise) where all options need to be compared simultaneously.
Simple Yes/No
“Are you currently a student?” (Yes / No).
NPS Alternatives
“How was your experience?” (Good / Neutral / Bad) using custom icons for each choice.
Configuration & Usage
1
Deploy to Canvas
Drag the Multiple Choice block from the Component Catalog onto the Canvas.
2
Build the List
Add your options. Remember, users can only select exactly one of these choices.
3
Enhance with Context
Use the Inspector to assign Icons or sub-text Descriptions to individual options to make them easier to understand.
Technical Configuration Schemas
- Visuals & Style
- Context & Enhancements
- Data & Validation
string
default:"md"
The size of the radio buttons and accompanying text. Available options are
sm, md, and lg.string
Changes the visual style of the radio list. For example, rendering them as standard circles or bordered pill buttons.
string
The accent color used when a radio button is selected (active state).
Data Payload Architecture
Because radio buttons restrict the user to a single choice, the output payload is a simple, flat string containing the selected Value (key).Deep Dive: The Power of Context
Radio buttons are often used for pricing plans or critical tier selections. A simple word like “Pro” might not be enough context for a user to make a decision. By utilizing the Descriptions and Icons parameters, you can transform a boring list of radio circles into a rich feature comparison.Visual Hierarchy Structure
Main Label: 'Pro Plan'
Icon: 'rocket-launch'
Description: 'Best for growing teams up to 50 users.'
UX Rule: Radio buttons inherently require the user to evaluate all options before clicking. Adding icons and descriptions drastically reduces the cognitive load required to make that choice.
Best Practices & FAQs
When to switch to a Dropdown
When to switch to a Dropdown
If your Multiple Choice list exceeds 5 or 6 items, it takes up too much vertical screen real estate, especially on mobile. At that point, you should switch to a Dropdown Block to save space.
Using Disabled Options
Using Disabled Options
If you offer a seminar on 3 different dates, and one date sells out, do not delete the option! Add its key to
disabled_options. This creates scarcity and shows future users that your events are highly sought after.