@scm-manager/ui-core 3.0.0-20240024-101702

package/src/base/forms/list/ControlledList.tsx

@@ -0,0 +1,88 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import { Path, PathValue } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { ScmFormPathContextProvider, useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
+import { useScmFormListContext } from "../ScmFormListContext";
+import { useTranslation } from "react-i18next";
+import { Button } from "../../buttons";
+
+type ArrayItemType<T> = T extends Array<infer U> ? U : unknown;
+
+type RenderProps<T extends Record<string, unknown>, PATH extends Path<T>> = {
+  value: ArrayItemType<PathValue<T, PATH>>;
+  index: number;
+  remove: () => void;
+};
+
+type Props<T extends Record<string, unknown>, PATH extends Path<T>> = {
+  withDelete?: boolean;
+  children: ((renderProps: RenderProps<T, PATH>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
+};
+
+/**
+ * @beta
+ * @since 2.43.0
+ */
+function ControlledList<T extends Record<string, unknown>, PATH extends Path<T>>({
+  withDelete,
+  children,
+}: Props<T, PATH>) {
+  const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { fields, remove } = useScmFormListContext();
+
+  const deleteButtonTranslation = t(`${prefixedNameWithoutIndices}.delete`, {
+    defaultValue: defaultTranslate("list.delete.label", {
+      entity: t(`${prefixedNameWithoutIndices}.entity`),
+    }),
+  });
+
+  return (
+    <>
+      {fields.map((value, index) => (
+        <ScmFormPathContextProvider key={value.id} path={`${nameWithPrefix}.${index}`}>
+          {typeof children === "function"
+            ? children({ value: value as never, index, remove: () => remove(index) })
+            : children}
+          {withDelete && !readOnly ? (
+            <div className="level-right">
+              <Button variant="signal" onClick={() => remove(index)}>
+                {deleteButtonTranslation}
+              </Button>
+            </div>
+          ) : null}
+          <hr />
+        </ScmFormPathContextProvider>
+      ))}
+    </>
+  );
+}
+
+export default ControlledList;

package/src/base/forms/radio-button/ControlledRadioGroupField.tsx

@@ -0,0 +1,94 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import RadioGroupField from "./RadioGroupField";
+import { Controller, ControllerRenderProps, Path } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
+import classNames from "classnames";
+import { RadioButtonContextProvider } from "./RadioButtonContext";
+
+type Props<T extends Record<string, unknown>> = Omit<
+  ComponentProps<typeof RadioGroupField>,
+  "label" | keyof ControllerRenderProps
+> & {
+  name: Path<T>;
+  rules?: ComponentProps<typeof Controller>["rules"];
+  label?: string;
+  readOnly?: boolean;
+};
+
+/**
+ * @beta
+ * @since 2.48.0
+ */
+function ControlledRadioGroupField<T extends Record<string, unknown>>({
+  name,
+  label,
+  helpText,
+  rules,
+  defaultValue,
+  children,
+  fieldClassName,
+  readOnly,
+  ...props
+}: Props<T>) {
+  const { control, t, readOnly: formReadOnly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label ?? t(`${prefixedNameWithoutIndices}.label`) ?? "";
+  const helpTextTranslation = helpText ?? t(`${prefixedNameWithoutIndices}.helpText`);
+
+  return (
+    <Controller
+      control={control}
+      name={nameWithPrefix}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field }) => (
+        <RadioButtonContextProvider t={t} prefix={prefixedNameWithoutIndices} formId={formId}>
+          <RadioGroupField
+            defaultValue={defaultValue}
+            disabled={readOnly ?? formReadOnly}
+            required={rules?.required as boolean}
+            label={labelTranslation}
+            helpText={helpTextTranslation}
+            fieldClassName={classNames("column", fieldClassName)}
+            onValueChange={field.onChange}
+            {...props}
+            {...field}
+            name={nameWithPrefix}
+          >
+            {children}
+          </RadioGroupField>
+        </RadioButtonContextProvider>
+      )}
+    />
+  );
+}
+
+export default ControlledRadioGroupField;

package/src/base/forms/radio-button/RadioButton.stories.tsx

@@ -0,0 +1,226 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useState } from "react";
+import { storiesOf } from "@storybook/react";
+import RadioButton from "./RadioButton";
+import RadioGroup from "./RadioGroup";
+import RadioGroupField from "./RadioGroupField";
+import Form from "../Form";
+import ControlledRadioGroupField from "./ControlledRadioGroupField";
+import ControlledInputField from "../input/ControlledInputField";
+import FormRow from "../FormRow";
+import { ScmFormListContextProvider } from "../ScmFormListContext";
+import ControlledList from "../list/ControlledList";
+import ControlledTable from "../table/ControlledTable";
+import ControlledColumn from "../table/ControlledColumn";
+import AddListEntryForm from "../AddListEntryForm";
+
+storiesOf("Radio Group", module)
+  .add("Uncontrolled State", () => {
+    return (
+      <RadioGroup name="starter_pokemon">
+        <RadioButton value="CHARMANDER" label="Charmander" />
+        <RadioButton value="SQUIRTLE" label="Squirtle" />
+        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+      </RadioGroup>
+    );
+  })
+  .add("Controlled State", () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <RadioGroup name="starter_pokemon" value={value} onValueChange={setValue}>
+        <RadioButton value="CHARMANDER" label="Charmander" />
+        <RadioButton value="SQUIRTLE" label="Squirtle" />
+        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+      </RadioGroup>
+    );
+  })
+  .add("Radio Group Field", () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <RadioGroupField
+        label="Choose your starter"
+        helpText="Choose wisely"
+        name="starter_pokemon"
+        value={value}
+        onValueChange={setValue}
+      >
+        <RadioButton value="CHARMANDER" label="Charmander" />
+        <RadioButton value="SQUIRTLE" label="Squirtle" />
+        <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+      </RadioGroupField>
+    );
+  })
+  .add("Controlled Radio Group Field", () => (
+    <Form
+      // eslint-disable-next-line no-console
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{ name: "", starter_pokemon: null }}
+    >
+      <FormRow>
+        <ControlledInputField name="name" />
+      </FormRow>
+      <FormRow>
+        <ControlledRadioGroupField
+          name="starter_pokemon"
+          label="Starter Pokemon"
+          helpText="Choose wisely"
+          rules={{ required: true }}
+        >
+          <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+          <RadioButton value="SQUIRTLE" label="Squirtle" />
+          <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+        </ControlledRadioGroupField>
+      </FormRow>
+    </Form>
+  ))
+  .add("Readonly Controlled Radio Group Field", () => (
+    <Form
+      // eslint-disable-next-line no-console
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{ name: "Red", starter_pokemon: "SQUIRTLE" }}
+    >
+      <FormRow>
+        <ControlledInputField name="name" />
+      </FormRow>
+      <FormRow>
+        <ControlledRadioGroupField
+          name="starter_pokemon"
+          label="Starter Pokemon"
+          helpText="Choose wisely"
+          readOnly={true}
+        >
+          <RadioButton value="CHARMANDER" label="Charmander" labelClassName="is-block" />
+          <RadioButton value="SQUIRTLE" label="Squirtle" />
+          <RadioButton value="BULBASAUR" label="Bulbasaur" helpText="Dont pick this one" />
+        </ControlledRadioGroupField>
+      </FormRow>
+    </Form>
+  ))
+  .add("With options", () => (
+    <Form
+      // eslint-disable-next-line no-console
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{ starter_pokemon: "CHARMANDER" }}
+    >
+      <FormRow>
+        <ControlledRadioGroupField
+          name="starter_pokemon"
+          label="Starter Pokemon"
+          helpText="Choose wisely"
+          rules={{ required: true }}
+          options={[
+            { value: "CHARMANDER", label: "Charmander" },
+            { value: "SQUIRTLE", label: "Squirtle" },
+            { value: "BULBASAUR", label: "Bulbasaur", helpText: "Dont pick this one" },
+          ]}
+        />
+      </FormRow>
+    </Form>
+  ))
+  .add("Without label prop", () => (
+    <Form
+      // eslint-disable-next-line no-console
+      onSubmit={console.log}
+      translationPath={["sample", "form"]}
+      defaultValues={{ starter_pokemon: "CHARMANDER" }}
+    >
+      <FormRow>
+        <ControlledRadioGroupField
+          name="starter_pokemon"
+          label="Starter Pokemon"
+          helpText="Choose wisely"
+          rules={{ required: true }}
+          options={[
+            { value: "CHARMANDER" },
+            { value: "SQUIRTLE" },
+            { value: "BULBASAUR", helpText: "Dont pick this one" },
+          ]}
+        />
+      </FormRow>
+    </Form>
+  ))
+  .add("Nested", () => (
+    <Form
+      translationPath={["sample", "form"]}
+      // eslint-disable-next-line no-console
+      onSubmit={console.log}
+      defaultValues={{
+        trainers: [
+          {
+            name: "Red",
+            team: [{ nickname: "Charlie", pokemon: "CHARMANDER" }],
+          },
+          {
+            name: "Blue",
+            team: [{ nickname: "Squirtle", pokemon: "SQUIRTLE" }],
+          },
+          {
+            name: "Green",
+            team: [{ nickname: "Plant", pokemon: "SQUIRTLE" }],
+          },
+        ],
+      }}
+    >
+      <ScmFormListContextProvider name={"trainers"}>
+        <ControlledList withDelete>
+          {({ value: trainers }) => (
+            <>
+              <FormRow>
+                <ControlledInputField name={"name"} />
+              </FormRow>
+              <details className="has-background-dark-25 mb-2 p-2">
+                <summary className="is-clickable">Team</summary>
+                <div>
+                  <ScmFormListContextProvider name={"team"}>
+                    <ControlledTable withDelete>
+                      <ControlledColumn name="nickname" />
+                      <ControlledColumn name="pokemon" />
+                    </ControlledTable>
+                    <AddListEntryForm defaultValues={{ nickname: "", pokemon: null }}>
+                      <FormRow>
+                        <ControlledInputField name="nickname" />
+                      </FormRow>
+                      <FormRow>
+                        <ControlledRadioGroupField
+                          name="pokemon"
+                          label="Starter Pokemon"
+                          rules={{ required: true }}
+                          options={[{ value: "CHARMANDER" }, { value: "SQUIRTLE" }, { value: "BULBASAUR" }]}
+                        />
+                      </FormRow>
+                    </AddListEntryForm>
+                  </ScmFormListContextProvider>
+                </div>
+              </details>
+            </>
+          )}
+        </ControlledList>
+      </ScmFormListContextProvider>
+    </Form>
+  ));

package/src/base/forms/radio-button/RadioButton.tsx

@@ -0,0 +1,116 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import classNames from "classnames";
+import Help from "../base/help/Help";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { createAttributesForTesting, useAriaId } from "../../helpers";
+import styled from "styled-components";
+import { useRadioButtonContext } from "./RadioButtonContext";
+
+const StyledRadioButton = styled(RadioGroup.Item)`
+  all: unset;
+  width: 1rem;
+  height: 1rem;
+  border: var(--scm-border);
+  border-radius: 100%;
+
+  :hover {
+    border-color: var(--scm-hover-color);
+  }
+
+  :hover *::after {
+    background-color: var(--scm-info-hover-color);
+  }
+
+  :disabled {
+    background-color: var(--scm-dark-color-25);
+    border-color: var(--scm-hover-color);
+  }
+
+  :disabled *::after {
+    background-color: var(--scm-info-color);
+  }
+`;
+
+const StyledIndicator = styled(RadioGroup.Indicator)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ::after {
+    content: "";
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--scm-info-color);
+  }
+`;
+
+type Props = {
+  value: string;
+  id?: string;
+  testId?: string;
+  indicatorClassName?: string;
+  label?: string;
+  labelClassName?: string;
+  helpText?: string;
+} & ComponentProps<typeof RadioGroup.Item>;
+
+/**
+ * @beta
+ * @since 2.48.0
+ */
+const RadioButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ id, testId, indicatorClassName, label, labelClassName, className, helpText, value, ...props }, ref) => {
+    const context = useRadioButtonContext();
+    const inputId = useAriaId(id);
+    const labelKey = `${context?.prefix}.radio.${value}`;
+
+    return (
+      <label className={classNames("radio is-flex is-align-items-center", labelClassName)} htmlFor={inputId}>
+        <StyledRadioButton
+          form={context?.formId}
+          id={inputId}
+          value={value}
+          ref={ref}
+          className={classNames("mr-3 mt-3 mb-3", className)}
+          {...props}
+          {...createAttributesForTesting(testId)}
+        >
+          <StyledIndicator className={indicatorClassName} />
+        </StyledRadioButton>
+        {label ?? context?.t(labelKey) ?? value}
+        {helpText ? <Help className="ml-3" text={helpText} /> : null}
+      </label>
+    );
+  }
+);
+
+export default RadioButton;

package/src/base/forms/radio-button/RadioButtonContext.tsx

@@ -0,0 +1,42 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { createContext, FC, useContext } from "react";
+import { TFunction } from "i18next";
+
+type ContextType = {
+  t: TFunction;
+  prefix: string;
+  formId?: string;
+};
+
+const RadioButtonContext = createContext<ContextType | null>(null);
+
+export function useRadioButtonContext() {
+  return useContext(RadioButtonContext);
+}
+
+export const RadioButtonContextProvider: FC<ContextType> = ({ children, ...props }) => (
+  <RadioButtonContext.Provider value={props}>{children}</RadioButtonContext.Provider>
+);

package/src/base/forms/radio-button/RadioGroup.tsx

@@ -0,0 +1,49 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import Control from "../base/Control";
+import * as RadixRadio from "@radix-ui/react-radio-group";
+import RadioButton from "./RadioButton";
+
+type Props = {
+  options?: { value: string; label?: string; helpText?: string }[];
+} & ComponentProps<typeof RadixRadio.Root>;
+
+/**
+ * @beta
+ * @since 2.48.0
+ */
+const RadioGroup = React.forwardRef<HTMLDivElement, Props>(({ options, children, className, ...props }, ref) => (
+  <RadixRadio.Root {...props} asChild>
+    <Control ref={ref} className={className}>
+      {children ??
+        options?.map((option) => (
+          <RadioButton key={option.value} value={option.value} label={option.label} helpText={option.helpText} />
+        ))}
+    </Control>
+  </RadixRadio.Root>
+));
+
+export default RadioGroup;

package/src/base/forms/radio-button/RadioGroupField.tsx

@@ -0,0 +1,58 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+import Field from "../base/Field";
+import Label from "../base/label/Label";
+import Help from "../base/help/Help";
+import RadioGroup from "./RadioGroup";
+
+type Props = {
+  fieldClassName?: string;
+  labelClassName?: string;
+  label: string;
+  helpText?: string;
+} & ComponentProps<typeof RadioGroup>;
+
+/**
+ * @beta
+ * @since 2.48.0
+ */
+const RadioGroupField = React.forwardRef<HTMLDivElement, Props>(
+  ({ fieldClassName, labelClassName, label, helpText, children, ...props }, ref) => {
+    return (
+      <Field className={fieldClassName} as="fieldset">
+        <Label className={labelClassName} as="legend">
+          {label}
+          {helpText ? <Help className="ml-1" text={helpText} /> : null}
+        </Label>
+        <RadioGroup ref={ref} {...props}>
+          {children}
+        </RadioGroup>
+      </Field>
+    );
+  }
+);
+
+export default RadioGroupField;