Radio Widget Overview

The Radio Widget renders a single radio button option in Buildocs UI Engine. Multiple Radio Widgets that share the same Group Name form a mutually exclusive selection group — only one radio in the group can be selected at a time.

Behavior

• Displays a radio button with an optional label
• When selected, stores the configured Value in the form data under the Group Name field
• Only one radio per group can be active at a time
• Supports a default selected state on form load
• Optionally fires an onChange event to the backend when the selection changes

Grouping Radios

Assign the same Group Name to multiple Radio Widgets to create a mutually exclusive group. The selected radio's Value is stored under that group name in the form data.

Group Name: "paymentMethod"

Radio 1 → Value: "creditCard"   → Label: "Credit Card"
Radio 2 → Value: "bankTransfer" → Label: "Bank Transfer"
Radio 3 → Value: "cash"         → Label: "Cash"

→ formData["paymentMethod"] = "creditCard"  (if Radio 1 is selected)

If Group Name is left empty, the widget's own Name is used as the storage key.

Label Placement

The label text can be positioned relative to the radio button:

Placement	Description
End	Label appears to the right of the radio button (default)
Start	Label appears to the left of the radio button
Top	Label appears above the radio button
Bottom	Label appears below the radio button

Adding to a Row

1. Open your form in the Form Builder
2. Add a Row to the canvas for each radio option — see Building Layouts
3. Locate the Radio widget in the component palette
4. Drag one Radio Widget into a Row segment for each option
5. Set the same Group Name on all radios that belong to the same group
6. Assign a unique Value to each radio

info

Radio widgets must be placed inside a Row segment. They cannot be dropped directly onto the canvas.

Next Steps

• Properties — full reference for all radio settings