ImageRadio

The ImageRadio widget renders a radio group as images, so you pick only one of several image options.
Only one item in a group stays selected, and each item shows a different image for its selected, unselected, and disabled states.

Definition and role

ImageRadio items that share the same groupId form a single radio group. Each item has its own value, and tapping an item sets the group's selected value to that item's value. The widget shows one of up to four images based on the combination of selected and enabled state, and selecting an item runs whatever you connected to onChanged.

• Category: Contents
• Single selection per group — only one item among those sharing a groupId
• A separate image per state (selected + enabled / unselected + enabled / unselected + disabled / selected + disabled)

Features

Feature	Description
Single selection per group	Items with the same groupId form one group, and only one of them stays selected. Tapping an item sets the group's selected value to that item's value.
Image per state	Depending on the selected and enabled combination, the widget shows one of activeAssetPath, inactiveAssetPath, disabledAssetPath, or disabledActiveAssetPath.
Label display	Show a text label (label) next to the image, and set its gap (labelGap) and text style (labelStyle).
Size settings	Set the displayed image size with radioWidth and radioHeight.
Selection event	When an item is selected, the logic or script connected to onChanged runs.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the ImageRadio item onto the canvas.
3. Give the items you want to group together the same groupId.
4. Give each item a distinct value and its per-state images (activeAssetPath, inactiveAssetPath, and so on).
5. If needed, connect an action to onChanged to run when the item is selected.

Properties

note

radioWidth, radioHeight, label, labelStyle, and labelGap have no default value, so they take effect only once you set them.

Property	Description	Default	Value / type
groupId	Radio group identifier. Items with the same value act as one group	Empty string	String
value	This item's unique value. When the item is selected, the group's selected value becomes this value	Empty string	String
groupValue	The group's current selected value	Empty string	String
enable	Whether the item is enabled. When off, the item can't be selected and shows its disabled image	On (true)	true / false
activeAssetPath	Image path shown in the selected + enabled state	Empty string	Image path (String)
inactiveAssetPath	Image path shown in the unselected + enabled state	Empty string	Image path (String)
disabledAssetPath	Image path shown in the unselected + disabled state	Empty string	Image path (String)
disabledActiveAssetPath	Image path shown in the selected + disabled state	Empty string	Image path (String)
radioWidth	Displayed image width	Not set	Number (px)
radioHeight	Displayed image height	Not set	Number (px)
label	Text label shown next to the image (optional)	Not set	String
labelStyle	Text style for the label, such as color and size	Not set	Text style
labelGap	Gap between the image and the label	Not set	Number (px)

Notes and tips

note

To act as one group, items must share the same groupId, and each item's value must differ. Tapping an item sets the group's selected value to its own value, which automatically deselects every other item in that group.

tip

If you don't set the per-state images, a fallback image appears — an empty image placeholder. Without radioWidth and radioHeight, that fallback renders at 20×20, and if you turn on label without setting labelGap, the gap between the image and the label is 8.

Learn more

tip

For the full set of Widget Control members (Property, Method, Event) you can script on this widget, visit ImageRadio Widget Control.