Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Radio Group
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11600-77344&t=ftfrOGkPzlG2GaTo-1
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.
...
- 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
elementswith a uniquevalue. - Preselect the most common/safe choice with
defaultValueto 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
dataFieldand, if needed, choose where it goes withcontrolsRequestType(BODY,HEADER, orPATH).
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Preselect the safest default to reduce friction. | Leave the group with no selection when a safe default exists. | defaultValue | |||
| Keep unavailable choices visible but inactive. | Remove unavailable choices and confuse users about what’s supported. | elements[].disabled | |||
| Lock the control during review steps. | Leave it interactive when edits are not allowed. | readonly | |||
| Persist the last user selection across sessions. | Force users to reselect on every visit. | saveInLocalStorage | |||
| Submit the value under a clear, stable key. | Rely on ambiguous or changing field names. | dataField | |||
| Map the value to the correct request location. | Hard-code transport rules elsewhere. | controlsRequestType | Initialize logic on mount and clean up on teardown. | Defer setup until first click and leak resources on removal. | events.ON_INIT, events.ON_DESTROY |
| React immediately to user changes. | Require extra steps to apply a selection. | events.ON_VALUE_CHANGE | |||
| Hide the group when not relevant to the current flow. | Leave irrelevant choices visible and distract the user. | hidden | |||
| Localize every visible label. | Ship English-only labels. | elements[].displayValue |
...
