Fix support for required attribute for radio button groups (#3116)

Author: connor-baer

.changeset/blue-comics-float.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Fixed support for the `required` attribute in the RadioButtonGroup and SelectorGroup components.

packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -199,6 +199,7 @@ export const RadioButtonGroup = forwardRef(
               {...option}
               key={option.value?.toString() || option.label}
               disabled={disabled || option.disabled}
+              required={required || option.required}
               name={name}
               onChange={onChange}
               onBlur={onBlur}

packages/circuit-ui/components/Selector/Selector.tsx

@@ -111,6 +111,7 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
       'id': customId,
       name,
       disabled,
+      required,
       invalid,
       multiple,
       onChange,
@@ -164,6 +165,7 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
           name={name}
           value={value}
           disabled={disabled}
+          required={multiple ? undefined : required}
           // @ts-expect-error Change is handled by onClick for browser support, see https://stackoverflow.com/a/5575369
           onClick={onChange}
           // Noop to silence React warning: https://github.com/facebook/react/issues/3070#issuecomment-73311114

packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx

@@ -201,6 +201,7 @@ export const SelectorGroup = forwardRef<
               multiple={multiple}
               size={size}
               disabled={disabled || option.disabled}
+              required={required || option.required}
               invalid={invalid || option.invalid}
               checked={
                 value ? isChecked(option, value, multiple) : option.checked