@aehrc/smart-forms-renderer 0.12.1 → 0.13.0

package/lib/utils/validateQuestionnaire.d.ts

@@ -0,0 +1,23 @@
+import type { QuestionnaireResponse } from 'fhir/r4';
+import { Questionnaire } from 'fhir/r4';
+import { EnableWhenExpression, EnableWhenItems } from '../interfaces/enableWhen.interface';
+import { RegexValidation } from '../interfaces/regex.interface';
+export type InvalidType = 'regex' | 'minLength' | 'maxLength' | 'required';
+interface ValidateQuestionnaireParams {
+    questionnaire: Questionnaire;
+    questionnaireResponse: QuestionnaireResponse;
+    invalidItems: Record<string, InvalidType>;
+    enableWhenIsActivated: boolean;
+    enableWhenItems: EnableWhenItems;
+    enableWhenExpressions: Record<string, EnableWhenExpression>;
+}
+/**
+ * Recursively go through the questionnaireResponse and check for un-filled required qItems
+ * At the moment item.required for group items are not checked
+ * FIXME will eventually be renamed to validate questionnaire
+ *
+ * @author Sean Fong
+ */
+export declare function validateQuestionnaire(params: ValidateQuestionnaireParams): Record<string, InvalidType>;
+export declare function getInputInvalidType(input: string, regexValidation: RegexValidation | null, minLength: number | null, maxLength: number | null): InvalidType | null;
+export {};

package/lib/utils/validateQuestionnaire.js

@@ -0,0 +1,183 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
+import { isHidden } from './qItem';
+import { getRegexValidation } from './itemControl';
+import { structuredDataCapture } from 'fhir-sdc-helpers';
+/**
+ * Recursively go through the questionnaireResponse and check for un-filled required qItems
+ * At the moment item.required for group items are not checked
+ * FIXME will eventually be renamed to validate questionnaire
+ *
+ * @author Sean Fong
+ */
+export function validateQuestionnaire(params) {
+    var _a;
+    const { questionnaire, questionnaireResponse, invalidItems, enableWhenIsActivated, enableWhenItems, enableWhenExpressions } = params;
+    if (!questionnaire.item ||
+        questionnaire.item.length === 0 ||
+        !questionnaireResponse.item ||
+        questionnaireResponse.item.length === 0) {
+        return invalidItems;
+    }
+    const qItemsIndexMap = mapQItemsIndex(questionnaire);
+    const topLevelQRItemsByIndex = getQrItemsIndex(questionnaire.item, questionnaireResponse.item, qItemsIndexMap);
+    for (const [index, topLevelQItem] of questionnaire.item.entries()) {
+        let topLevelQRItem = (_a = topLevelQRItemsByIndex[index]) !== null && _a !== void 0 ? _a : {
+            linkId: topLevelQItem.linkId,
+            text: topLevelQItem.text
+        };
+        if (Array.isArray(topLevelQRItem)) {
+            topLevelQRItem = {
+                linkId: topLevelQItem.linkId,
+                text: topLevelQItem.text,
+                item: topLevelQRItem
+            };
+        }
+        validateItemRecursive({
+            qItem: topLevelQItem,
+            qrItem: topLevelQRItem,
+            invalidItems: invalidItems,
+            enableWhenIsActivated,
+            enableWhenItems,
+            enableWhenExpressions
+        });
+    }
+    return invalidItems;
+}
+function validateItemRecursive(params) {
+    var _a, _b;
+    const { qItem, qrItem, invalidItems, enableWhenIsActivated, enableWhenItems, enableWhenExpressions } = params;
+    if (isHidden({
+        questionnaireItem: qItem,
+        enableWhenIsActivated,
+        enableWhenItems,
+        enableWhenExpressions
+    })) {
+        return;
+    }
+    // FIXME repeat groups not working
+    if (qItem.type === 'group' && qItem.repeats) {
+        return validateRepeatGroup(qItem, qrItem, invalidItems);
+    }
+    const childQItems = qItem.item;
+    if (childQItems && childQItems.length > 0) {
+        const childQrItems = (_a = qrItem === null || qrItem === void 0 ? void 0 : qrItem.item) !== null && _a !== void 0 ? _a : [];
+        const indexMap = mapQItemsIndex(qItem);
+        const qrItemsByIndex = getQrItemsIndex(childQItems, childQrItems, indexMap);
+        if (qItem.type === 'group' && qItem.required) {
+            if (!qrItem || qrItemsByIndex.length === 0) {
+                invalidItems[qItem.linkId] = 'required';
+            }
+        }
+        for (const [index, childQItem] of childQItems.entries()) {
+            let childQRItem = (_b = qrItemsByIndex[index]) !== null && _b !== void 0 ? _b : {
+                linkId: childQItem.linkId,
+                text: childQItem.text
+            };
+            if (Array.isArray(childQRItem)) {
+                childQRItem = {
+                    linkId: childQItem.linkId,
+                    text: childQItem.text,
+                    item: childQRItem
+                };
+            }
+            validateItemRecursive({
+                qItem: childQItem,
+                qrItem: childQRItem,
+                invalidItems: invalidItems,
+                enableWhenIsActivated,
+                enableWhenItems,
+                enableWhenExpressions
+            });
+        }
+    }
+    validateSingleItem(qItem, qrItem, invalidItems);
+}
+function validateSingleItem(qItem, qrItem, invalidItems) {
+    var _a, _b;
+    // Validate item.required
+    if (qItem.type !== 'display') {
+        if (qItem.required && !qrItem.answer) {
+            invalidItems[qItem.linkId] = 'required';
+            return invalidItems;
+        }
+    }
+    // Validate regex, maxLength and minLength
+    if (qrItem.answer) {
+        for (const answer of qrItem.answer) {
+            if (answer.valueString || answer.valueInteger || answer.valueDecimal || answer.valueUri) {
+                const invalidInputType = getInputInvalidType(getInputInString(answer), getRegexValidation(qItem), (_a = structuredDataCapture.getMinLength(qItem)) !== null && _a !== void 0 ? _a : null, (_b = qItem.maxLength) !== null && _b !== void 0 ? _b : null);
+                if (!invalidInputType) {
+                    continue;
+                }
+                // Assign invalid type and break - stop checking other answers if is a repeat item
+                switch (invalidInputType) {
+                    case 'regex':
+                        invalidItems[qItem.linkId] = 'regex';
+                        break;
+                    case 'minLength':
+                        invalidItems[qItem.linkId] = 'minLength';
+                        break;
+                    case 'maxLength':
+                        invalidItems[qItem.linkId] = 'maxLength';
+                        break;
+                }
+                break;
+            }
+        }
+        // Reached the end of the loop and no invalid input type found
+        // If a required item is filled, remove the required invalid type
+        if (qItem.required && invalidItems[qItem.linkId] && invalidItems[qItem.linkId] === 'required') {
+            delete invalidItems[qItem.linkId];
+        }
+    }
+    return invalidItems;
+}
+function validateRepeatGroup(qItem, qrItems, invalidLinkIds) {
+    return;
+}
+function getInputInString(answer) {
+    if (answer.valueString) {
+        return answer.valueString;
+    }
+    else if (answer.valueInteger) {
+        return answer.valueInteger.toString();
+    }
+    else if (answer.valueDecimal) {
+        return answer.valueDecimal.toString();
+    }
+    else if (answer.valueUri) {
+        return answer.valueUri;
+    }
+    return '';
+}
+export function getInputInvalidType(input, regexValidation, minLength, maxLength) {
+    if (input) {
+        if (regexValidation && !regexValidation.expression.test(input)) {
+            return 'regex';
+        }
+        if (minLength && input.length < minLength) {
+            return 'minLength';
+        }
+        if (maxLength && input.length > maxLength) {
+            return 'maxLength';
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=validateQuestionnaire.js.map

package/lib/utils/validateQuestionnaire.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateQuestionnaire.js","sourceRoot":"","sources":["../../src/utils/validateQuestionnaire.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Box.styles.ts

@@ -16,7 +16,7 @@
  */
 
 import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 export const QGroupContainerBox = styled(Box, {
@@ -37,3 +37,33 @@ export const FormTitleWrapper = styled(Box)(() => ({
 export const StyledFormControlLabel = styled(FormControlLabel)(() => ({
   height: 34
 }));
+
+export const RequiredLabel = styled(Box)(({ theme }) => ({
+  height: 12,
+  minWidth: 20,
+  lineHeight: 0,
+  borderRadius: 6,
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  justifyContent: 'center',
+  padding: theme.spacing(1),
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.error.dark,
+  backgroundColor: alpha(theme.palette.error.main, 0.16),
+  fontWeight: theme.typography.fontWeightBold
+}));
+
+export const ReadOnlyLabel = styled(Box)(({ theme }) => ({
+  height: 12,
+  minWidth: 20,
+  lineHeight: 0,
+  borderRadius: 6,
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  justifyContent: 'center',
+  padding: theme.spacing(1),
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.text.primary,
+  backgroundColor: theme.palette.grey['300'],
+  fontWeight: theme.typography.fontWeightBold
+}));

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -44,7 +44,7 @@ function BooleanItem(props: BooleanItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   let checked = false;
@@ -75,7 +75,11 @@ function BooleanItem(props: BooleanItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-boolean-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
       </ItemFieldGrid>
     </FullWidthFormComponentBox>

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React, { useState } from 'react';
-import Grid from '@mui/material/Grid';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -31,10 +30,9 @@ import type {
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ChoiceAutocompleteField from './ChoiceAutocompleteField';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler,
@@ -56,7 +54,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   }
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const maxList = 10;
 
@@ -106,25 +104,23 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceAutocompleteField
-            qItem={qItem}
-            options={options}
-            valueCoding={valueCoding ?? null}
-            loading={loading}
-            feedback={feedback ?? null}
-            readOnly={readOnly}
-            isTabled={isTabled}
-            onInputChange={setInput}
-            onValueChange={handleValueChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceAutocompleteField
+          qItem={qItem}
+          options={options}
+          valueCoding={valueCoding ?? null}
+          loading={loading}
+          feedback={feedback ?? null}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onInputChange={setInput}
+          onValueChange={handleValueChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -30,9 +29,9 @@ import type {
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -60,7 +59,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Event handlers
   function handleCheckedChange(changedValue: string) {
@@ -97,21 +96,19 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceCheckboxAnswerValueSetFields
-            qItem={qItem}
-            answers={answers}
-            orientation={orientation}
-            readOnly={readOnly}
-            onCheckedChange={handleCheckedChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceCheckboxAnswerValueSetFields
+          qItem={qItem}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          onCheckedChange={handleCheckedChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
@@ -31,9 +30,9 @@ import type {
   PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -62,7 +61,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
@@ -102,22 +101,20 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceCheckboxAnswerValueSetFields
-            codings={codings}
-            answers={answers}
-            orientation={orientation}
-            readOnly={readOnly}
-            serverError={serverError}
-            onCheckedChange={handleCheckedChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceCheckboxAnswerValueSetFields
+          codings={codings}
+          answers={answers}
+          orientation={orientation}
+          readOnly={readOnly}
+          serverError={serverError}
+          onCheckedChange={handleCheckedChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
@@ -28,10 +27,9 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -50,7 +48,7 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
   const valueRadio = getQrChoiceValue(qrChoiceRadio);
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Event handlers
   function handleChange(newValue: string) {
@@ -76,21 +74,19 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceRadioAnswerOptionFields
-            qItem={qItem}
-            valueRadio={valueRadio}
-            orientation={orientation}
-            readOnly={readOnly}
-            onCheckedChange={handleChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceRadioAnswerOptionFields
+          qItem={qItem}
+          valueRadio={valueRadio}
+          orientation={orientation}
+          readOnly={readOnly}
+          onCheckedChange={handleChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerValueSetCodings } from '../../../utils/choice';
@@ -29,10 +28,9 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -47,7 +45,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
@@ -88,23 +86,21 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
 
   return (
     <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-value-set-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <ChoiceRadioAnswerValueSetFields
-            qItem={qItem}
-            codings={codings}
-            valueRadio={valueRadio}
-            orientation={orientation}
-            readOnly={readOnly}
-            serverError={serverError}
-            onCheckedChange={handleChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <ChoiceRadioAnswerValueSetFields
+          qItem={qItem}
+          codings={codings}
+          valueRadio={valueRadio}
+          orientation={orientation}
+          readOnly={readOnly}
+          serverError={serverError}
+          onCheckedChange={handleChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }