Single Select
A radio-button group. Children must be Option components. When a user selects an option, its optionValue is stored in the bound variable as a string.
Insert image: A SingleSelect component on the editor canvas with three Option children styled as selection cards, one highlighted in the active/selected state
Properties
| Property | Description |
|---|---|
autoNavigate | Automatically navigate to the next page after selection. |
navigateDelay | Delay in milliseconds before auto-navigation (default: 300). |
Active Style
Each Option child is automatically wrapped in an Active Style context — when selected, the option and all its children enter the active state. Style your selected state using Active Style overrides without any manual condition setup.
Common Pattern
A typical quiz page uses a Single Select with several Options. Each Option contains a Stack with an icon and text. The Active Style adds a colored border and background to indicate the selected choice.
With autoNavigate enabled, the funnel advances to the next page immediately after the user taps an option — no separate “Next” button needed.