(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Radio Group

The Radio Group component is a form control that allows users to select a single option from a set of mutually exclusive choices. It renders as a vertical list of radio buttons where only one option can be selected at a time. This component is particularly useful for scenarios where users need to make a clear choice among a limited number of options, such as selecting a shipping method, payment type, or other exclusive preferences.

Properties

Visual Properties

• elements - Contains the collection of radio button elements that will be rendered within this radio group. Each element represents an individual radio button option with its own value and display text. For example, you can create a gender selection with [{"displayValue": {"en-US": "Male"}, "value": "male"}, {"displayValue": {"en-US": "Female"}, "value": "female"}, {"displayValue": {"en-US": "Other"}, "value": "other"}].

• hidden - Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional rendering based on other field values or application states.

• saveInLocalStorage - Determines whether the component's selected value is preserved in local storage between sessions. When enabled, user selection persists between page reloads, improving user experience for complex forms that may take time to complete.

• defaultValue - Sets the initial radio button that will be selected when the form is reset or first displayed. For example, setting to "standard" would pre-select the radio button with that value to provide users with a recommended default option.

• readonly - Controls whether the radio selection can be changed by users. When set to true, the field displays the selected value but cannot be modified, which is useful for display-only scenarios or when values are determined programmatically.

Non-Visual Properties

• dataField - Defines the field name that will be used when submitting form data. For example, setting to "paymentMethod" ensures the selected radio value is submitted with this field name in the data object.

• controlsRequestType - Specifies how the field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the radio selection in the request body, which is standard for most form submissions.

Authorization Properties

• authorizationDisable - Specifies a policy set that determines when the component should be disabled based on user permissions. For example, setting to "readOnlyPolicy" will disable the radio group for users who don't have edit permissions according to the specified policy.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_VALUE_CHANGE: Triggered when the user selects a different radio option. Can be used to perform immediate actions based on the selection, such as showing or hiding conditional form fields.
  • ON_INIT_BASED_ON_USER_VIEW: Triggered specifically when the component initializes in user view mode rather than edit mode.
  • ON_INIT: Triggered when the radio group component is initialized. Can be used to perform setup operations or initial state calculations.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Working with Radio Buttons

Each radio button within the group is configured as a child element with the following properties:

• displayName - Sets the display name of the radio button in the structure panel. For example, "Standard Shipping Option".

• displayValue - Sets the text that appears next to the radio button, with support for multiple languages. For example, {"en-US": "Standard Shipping (3-5 days)", "de-DE": "Standardversand (3-5 Tage)"} ensures proper localization of the option label.

• value - Sets the data value that will be submitted when this radio button is selected. For example, "standard_shipping" would be the value sent to the backend when this option is chosen.

• disabled - Controls whether an individual radio button can be selected. When set to true, the option appears grayed out and cannot be clicked, which is useful for showing unavailable options while still keeping them visible.