Radio Button Group

The Radio Button Group widget is used to display multiple options where users can select only one. It is best suited for mutually exclusive choices, where selecting one automatically deselects the others.

Common Use Cases

• Selecting user roles (e.g., Admin, Viewer, Editor)

• Choosing a preferred contact method (e.g., Email, Phone, SMS)

• Defining a payment method or shipping option in checkout flows

• Capturing binary or categorical input in forms (eg: male or female)

Widget Properties

When a Radio Button Group widget is added to a page, the Panel tab includes specific controls under the "No. of Radio Buttons" section.

Buttons

• By default, two radio buttons are added.

• You can drag and reorder the buttons within the group.

• Buttons can be added or removed as needed to fit your design.

• Each button can have a label and value set to represent different selection options.

Step-by-Step Guide to Use the Radio Button Group Widget

Step 1: Add the Widget

Open the Widgets Panel, navigate to the Fields & Headers section, and pick & drop the Radio Button Group widget onto your desired position on the page.

Step 2: Configure Main Settings

Click on the widget to open the Panel Tab. You can adjust the layout, set the default selected option, and configure spacing or orientation if supported by your platform.

Step 3: Bind/Set Properties

Use the “No. of Radio Buttons” property under the Panel Tab to specify how many buttons should be visible. Customize each button's label and value according to the form or function it supports and you can also drag to reorder the buttons, remove unused ones, or add new buttons to increase the number of options.

Step 4: Preview or Finalize

Switch to Preview Mode or publish the page to test the radio group. Confirm that only one button can be selected at a time and that the selection behaves as expected.