Kuika's Radio Button Group element allows users to select only one option from a group using buttons. Its button-based structure provides intuitive interaction, enabling users to make quick and accurate selections. It is ideal for situations where only one selection is valid, such as preferences, plans, or filtering.

Supported only in web applications.

Use Cases

• Subscription plan selection (e.g., Basic, Pro, Premium)
• Payment method selection (e.g., Credit Card, Bank Transfer, PayPal)
• Gender, age group, or survey response selection
• Delivery type selection (e.g., Same Day, Standard, Free Shipping)
• Report filters or view preferences
• Seating area or table type selection in reservation systems

Use Case – Payment Method Selection

In a shopping app, the user must select only one payment method at the payment step. At this step, the Radio Button Group element is used to present different payment options to the user.

In the scenario:

• The user arrives at the payment screen.
• There are three options under the “Select Payment Method” heading:
  
  • Credit Card
  • Bank Transfer
  • PayPal
• The user can only select one option.
• The selected button is highlighted with a different background and text color.
• Once selected, the system displays the payment form according to the selected method only.

Connecting the Data Source

• Go to the Datasources module.
• Click the “+” icon next to the Tables heading.
• Name the table PaymentOptions.
• Create the following table.

• Create a new action from the SQL Actions tab and name it PaymentList.
• Enter the following SQL command:

SELECT 1 AS OptionId, ‘Credit Card’ AS OptionNameUNION ALLSELECT 2, ‘Bank Transfer’UNION ALLSELECT 3, ‘PayPal’

• Link this action to the Radio Button Group element.
• Configure it as Options → PaymentList, Key = OptionId, Text = OptionName.

UI Design Module Operations

1. Go to the UI Design module.
2. From the left panel, select the Elements > Select Input > Radio Button Group element.
3. Drag and drop the element onto your screen.
4. Configure the following settings from the Properties panel:

• Label: Select Payment Method
• Options: PaymentList
• Value: OptionId
• Space: 12 px (space between options)
• Selected Font Color: #FFFFFF
• Selected Bg Color: #007BFF
• Unselected Bg Color: #F2F2F2

Using Properties in a Scenario Context

• Value: Holds the value of the selected button (e.g., “2” → Bank Transfer).
• Disabled: Disables usage; buttons become unclickable.
• Space: Determines the spacing between options, providing a more spacious appearance.
• Selected Font Color: Determines the text color of the selected button.
• Selected Bg Color: Determines the background color of the active selected button.
• Unselected Bg Color: Sets the background color of unselected buttons.

When the Scenario is Complete

• The user selects one of the buttons under the “Select Payment Method” heading.
• The selected button is highlighted in blue, while the others appear gray.
• The system displays the relevant form or information based on the selected payment method.
• When the user switches to another option, the previous selection is automatically removed.

Restrictions

• Only one selection can be made at a time.
• When dynamic data is not connected, options must be entered manually (statically).
• Button alignment may be disrupted in very long texts; in this case, the Space value should be increased.

Tips and Best Practices

• Keep button labels short and clear (e.g., “Card,” “Bank,” “PayPal”).
• Match the background color of the selected button to your brand's primary color.
• Using Radio Button Group with vertical alignment in surveys or forms improves readability.
• If you add an “OnChange” action, another field can be automatically updated when the user makes a selection.
• If there are more than three options, choose Column layout or scrollable container.