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

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-77344&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/7-radio

Guidelines

Usage

• Use when a single, mutually exclusive choice is required; define options in elements with a unique value.
• Preselect the most common/safe choice with defaultValue to reduce effort and avoid empty submissions.
• Preserve the user’s last pick across sessions by enabling saveInLocalStorage.
• Present read-only summaries (e.g., review steps) by setting the group to readonly: true.
• Keep temporarily unavailable choices visible but inactive by setting the specific option’s disabled: true.
• Ensure the selected value is submitted correctly by setting dataField and, if needed, choose where it goes with controlsRequestType (BODY, HEADER, or PATH).

Sizing & Layout

• Order options intentionally in elements; the group renders as a vertical list by design.
• Keep labels concise within each option’s displayValue to prevent wrapping in tight layouts.

States & Feedback

• Initial state: select a radio via defaultValue; communicate a preselected state clearly in displayValue.
• Read-only state: lock interaction with readonly: true while still showing the current selection.
• Option-level unavailability: set that option’s disabled: true so it remains visible but not selectable.
• Runtime visibility of the whole group: toggle hidden to show/hide while preserving form structure.
• Respond to user input immediately using events.ON_VALUE_CHANGE (for example, update this component’s own readonly or option disabled states).

Visibility & Authorization

• Disable interaction based on permissions with authorizationDisable (selection is shown but not changeable).
• Use hidden to conditionally remove the control from view while retaining its form presence when necessary.
• Prefer option-level disabled over removing options from elements so users understand availability.

Content & Localization

• Localize every option label using displayValue (for example, {"en-US":"Standard","de-DE":"Standard"}).
• Keep authoring-only names distinct with displayName; avoid using it for user-visible labels.
• Use short, concrete phrases in displayValue (1–2 words when possible) for scannability in vertical lists.

Dos & Don’ts

Accessibility

• Provide localized, announceable labels using elements[].displayValue.
• Choose the appropriate non-interactive state for clarity: readonly (show current selection without allowing change) vs elements[].disabled (show unselectable options).
• Use hidden to remove irrelevant controls from user view to reduce cognitive load while preserving form structure.
• When permission-based disabling is required, rely on authorizationDisable so users understand the control is intentionally non-editable.
• Avoid color-only meaning; communicate states through the built-in disabled/readonly and the wording in displayValue.
• Prefer elements[].disabled over removing options from elements so assistive technologies can convey that an option exists but is unavailable.
• Keep labels short and concrete in displayValue to improve announcement clarity in long lists.