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

Radio Group

Overview

• The Radio Group component is a form control for selecting one option from a set of choices.
• It displays a vertical list of radio buttons where only one can be selected at a time.
• The component is useful for clear, mutually exclusive decisions such as shipping methods or payment types.
• Each option in the group is defined as a radio button element with its own value and label.

Specs

Tokens

Structure

• The Radio Group consists of a vertical list of radio button elements where only one option can be selected at a time.

(Configured in General Properties)

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

(Configured in 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.
• saveInLocalStorage – Determines whether the component's selected value is preserved in local storage between sessions. When enabled, user selection persists between page reloads.

(Configured in 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.

Styling

(Configured in Visual Properties)

• 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.
• 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)"}.
• value – Sets the data value that will be submitted when a radio button is selected. For example, "standard_shipping" would be the value sent to the backend when this option is chosen.

Actions & Variants

(Configured in Visual Properties)

• 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.
• 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.
• 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.

(Configured in Events)

• 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 such as showing or hiding conditional form fields.
• ON_INIT_BASED_ON_USER_VIEW – Triggered 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.

Authorization

(Configured in Authorization)

• 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.

Guidelines

• Group radio options under a clear section title when appropriate.
• Maintain a logical, predictable order of options.
• Ensure each radio button has a concise, clear label (1–2 words, sentence-style capitalization, no colons).
• Provide consistent spacing: 24px around the form and 8px between radio options.
• Use sublines to separate different input groups if necessary.
• Keep interaction consistent — avoid forcing users to switch input methods frequently.
• Disclose additional radio options or groups only as they become relevant.

Accessibility

• [NO DATA AVAILABLE]