@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/QItemChoice/QItemChoiceAutocomplete.tsx

@@ -0,0 +1,178 @@
+/*
+ * 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 type { ChangeEvent, SyntheticEvent } from 'react';
+import React, { useState } from 'react';
+import { Autocomplete, CircularProgress, Fade, Grid, Tooltip } from '@mui/material';
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import SearchIcon from '@mui/icons-material/Search';
+import useDebounce from '../../../hooks/useDebounce';
+import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { getTerminologyServerUrl } from '../../../utils/valueSet';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemChoiceAutocompleteProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceAutocomplete(props: QItemChoiceAutocompleteProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const qrChoice = qrItem ?? createEmptyQrItem(qItem);
+
+  // Init input value
+  let valueCoding: Coding | undefined;
+  if (qrChoice.answer) {
+    valueCoding = qrChoice.answer[0].valueCoding;
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Query ontoserver for options
+  const maxList = 10;
+
+  const [input, setInput] = useState('');
+  const debouncedInput = useDebounce(input, AUTOCOMPLETE_DEBOUNCE_DURATION);
+
+  const answerValueSetUrl = qItem.answerValueSet;
+  const terminologyServerUrl = getTerminologyServerUrl(qItem);
+  const { options, loading, feedback } = useTerminologyServerQuery(
+    answerValueSetUrl,
+    maxList,
+    input,
+    debouncedInput,
+    terminologyServerUrl
+  );
+
+  if (!answerValueSetUrl) return null;
+
+  // Event handlers
+  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+    if (newValue === null) {
+      setInput('');
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
+
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueCoding: newValue }]
+    });
+  }
+
+  const choiceAutocomplete = (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueCoding ?? null}
+        placeholder={entryFormat}
+        options={options}
+        getOptionLabel={(option) => `${option.display}`}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        loading={loading}
+        loadingText={'Fetching results...'}
+        clearOnEscape
+        autoHighlight
+        onChange={handleValueChange}
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        filterOptions={(x) => x}
+        renderInput={(params) => (
+          <StandardTextField
+            {...params}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            isTabled={isTabled}
+            disabled={readOnly}
+            label={displayPrompt}
+            size="small"
+            InputProps={{
+              ...params.InputProps,
+
+              startAdornment: (
+                <>
+                  {!valueCoding ? <SearchIcon fontSize="small" sx={{ ml: 0.5 }} /> : null}
+                  {params.InputProps.startAdornment}
+                </>
+              ),
+              endAdornment: (
+                <>
+                  {loading ? (
+                    <CircularProgress color="inherit" size={16} />
+                  ) : feedback ? (
+                    <Fade in={!!feedback} timeout={300}>
+                      <Tooltip title={feedback.message} arrow sx={{ ml: 1 }}>
+                        {
+                          {
+                            info: <InfoIcon fontSize="small" color="info" />,
+                            warning: <WarningAmberIcon fontSize="small" color="warning" />,
+                            success: <DoneIcon fontSize="small" color="success" />,
+                            error: <ErrorIcon fontSize="small" color="error" />
+                          }[feedback.color]
+                        }
+                      </Tooltip>
+                    </Fade>
+                  ) : null}
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+    </>
+  );
+
+  const renderQItemChoiceAutocomplete = isRepeated ? (
+    <>{choiceAutocomplete}</>
+  ) : (
+    <FullWidthFormComponentBox>
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceAutocomplete}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceAutocomplete}</>;
+}
+
+export default QItemChoiceAutocomplete;

package/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerOption.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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 React from 'react';
+import { Grid } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemChoiceCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { QFormGroup } from '../Item.styles';
+import { updateQrCheckboxAnswers } from '../../../utils/choice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface QItemChoiceCheckboxProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemChoiceCheckboxAnswerOption(props: QItemChoiceCheckboxProps) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init input value
+  const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleCheckedChange(changedValue: string) {
+    const answerOptions = qItem.answerOption;
+    if (!answerOptions) return null;
+
+    const updatedQrChoiceCheckbox = updateQrCheckboxAnswers(
+      changedValue,
+      answers,
+      answerOptions,
+      qrChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrChoiceCheckbox) {
+      onQrItemChange(updatedQrChoiceCheckbox);
+    }
+  }
+
+  const choiceCheckbox = (
+    <QFormGroup row={orientation === QItemChoiceOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else if (option['valueString']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else if (option['valueInteger']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        } else {
+          return null;
+        }
+      })}
+    </QFormGroup>
+  );
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceCheckbox}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QItemChoiceCheckboxAnswerOption;

package/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerValueSet.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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 React from 'react';
+import { Grid, Typography } from '@mui/material';
+
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import { mapCodingsToOptions, updateQrCheckboxAnswers } from '../../../utils/choice';
+import QItemCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import { QFormGroup } from '../Item.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { StyledAlert } from '../../Alert.styles';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemChoiceCheckboxAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init input value
+  const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
+  const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  // Event handlers
+  function handleCheckedChange(changedValue: string) {
+    if (codings.length < 1) return null;
+
+    const updatedQrChoiceCheckbox = updateQrCheckboxAnswers(
+      changedValue,
+      answers,
+      mapCodingsToOptions(codings),
+      qrChoiceCheckbox,
+      isRepeated
+    );
+
+    if (updatedQrChoiceCheckbox) {
+      onQrItemChange(updatedQrChoiceCheckbox);
+    }
+  }
+
+  const choiceCheckbox =
+    codings.length > 0 ? (
+      <QFormGroup row={orientation === QItemChoiceOrientation.Horizontal}>
+        {codings.map((coding) => {
+          return (
+            <QItemCheckboxSingle
+              key={coding.code ?? ''}
+              value={coding.code ?? ''}
+              label={coding.display ?? `${coding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer.valueCoding) === JSON.stringify(coding)
+              )}
+              onCheckedChange={handleCheckedChange}
+            />
+          );
+        })}
+      </QFormGroup>
+    ) : serverError ? (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server
+        </Typography>
+      </StyledAlert>
+    ) : (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          Unable to fetch options from the questionnaire or launch context
+        </Typography>
+      </StyledAlert>
+    );
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceCheckbox}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QItemChoiceCheckboxAnswerValueSet;

package/src/components/FormComponents/QItemChoice/QItemChoiceRadioAnswerOption.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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 type { ChangeEvent } from 'react';
+import React from 'react';
+import { Grid } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import QItemChoiceRadioSingle from './QItemChoiceRadioSingle';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { QRadioGroup } from '../Item.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemChoiceRadioAnswerOption(props: Props) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init input value
+  const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
+  const valueRadio = getQrChoiceValue(qrChoiceRadio);
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    if (qItem.answerOption) {
+      const qrAnswer = findInAnswerOptions(qItem.answerOption, e.target.value);
+      if (qrAnswer) {
+        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+      }
+    }
+  }
+
+  const choiceRadio = (
+    <QRadioGroup
+      row={orientation === QItemChoiceOrientation.Horizontal}
+      name={qItem.text}
+      id={qItem.id}
+      onChange={handleChange}
+      value={valueRadio}
+      data-test="q-item-radio-group">
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+            />
+          );
+        } else if (option['valueString']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+            />
+          );
+        } else if (option['valueInteger']) {
+          return (
+            <QItemChoiceRadioSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+            />
+          );
+        } else {
+          return null;
+        }
+      })}
+    </QRadioGroup>
+  );
+
+  const renderQItemChoiceRadio = isRepeated ? (
+    <>{choiceRadio}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceRadio}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceRadio}</>;
+}
+
+export default QItemChoiceRadioAnswerOption;

package/src/components/FormComponents/QItemChoice/QItemChoiceRadioAnswerValueSet.tsx

@@ -0,0 +1,129 @@
+/*
+ * 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 type { ChangeEvent } from 'react';
+import React from 'react';
+import { Grid, Typography } from '@mui/material';
+import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { findInAnswerValueSetCodings } from '../../../utils/choice';
+import QItemChoiceRadioSingle from './QItemChoiceRadioSingle';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { QRadioGroup } from '../Item.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { StyledAlert } from '../../Alert.styles';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  orientation: QItemChoiceOrientation;
+}
+
+function QItemChoiceRadioAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+
+  // Init input value
+  const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
+
+  let valueRadio: string | undefined;
+  if (qrChoiceRadio.answer) {
+    valueRadio = qrChoiceRadio.answer[0].valueCoding?.code;
+  }
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    if (codings.length > 0) {
+      const qrAnswer = findInAnswerValueSetCodings(codings, event.target.value);
+      if (qrAnswer) {
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueCoding: qrAnswer }]
+        });
+      }
+    }
+  }
+
+  const choiceRadio =
+    codings.length > 0 ? (
+      <QRadioGroup
+        row={orientation === QItemChoiceOrientation.Horizontal}
+        name={qItem.text}
+        id={qItem.id}
+        onChange={handleChange}
+        value={valueRadio ?? null}>
+        {codings.map((coding: Coding) => {
+          return (
+            <QItemChoiceRadioSingle
+              key={coding.code ?? ''}
+              value={coding.code ?? ''}
+              label={coding.display ?? `${coding.code}`}
+              readOnly={readOnly}
+            />
+          );
+        })}
+      </QRadioGroup>
+    ) : serverError ? (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server
+        </Typography>
+      </StyledAlert>
+    ) : (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          Unable to fetch options from the questionnaire or launch context
+        </Typography>
+      </StyledAlert>
+    );
+
+  const renderQItemChoiceRadio = isRepeated ? (
+    <>{choiceRadio}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-radio-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceRadio}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceRadio}</>;
+}
+
+export default QItemChoiceRadioAnswerValueSet;