Option
The Option component allows users to pickup a suggested answer. When combined with other Option components, it enables users to pick one option from a list. Each time the user clicks on the component, it will select the Option's value. When one Option is selected, all other Options sharing the same name are unselected.
Properties
Option
Name
Question 1
Value
A
Label
Flower
Style
Hotspot
Name
The name under which the Option's value is stored. Naming your value gives you the ability to reuse the value of the option afterward, especially within the logic block, as well as synchronize all Option components that share the same name.
Value
The value that is stored once the option is selected. Once the user clicks on the component, the value is stored under the name you designated above.
Label
The Label will be displayed instead of the Value when set. This is useful in scenarios where you use the Value property as an index (e.g., A, B, C when using the Mostly Component).
Style
By default, the option component has a look and feel similar to a button. However, you can adjust or create a more advanced appearance by selecting a different style set:
Button: The component comes with a button-like style that you can customize as you wish.
Hotspot: When the Hotspot style is set, the component will be visible on the Canvas but transparent in the Preview and Website. This allows you to create a clickable zone where the component will operate while using the styles and effects from other frames. Combined with events like onSelect and onUnselect, you can create more advanced styling and behavior.
Events
Interaction
Click
Variant
Select
Variant
Unselected
Variant
An Event allows you to trigger a transition to a component’s variant when a specific action happens. The Option component accepts three types of events:
On Click:
Triggered when the user click on the option.
On Select:
Triggered when an option is selected.
On Unselected:
Triggered when an option is unselected.
Insert