diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteInput.js
new file mode 100644
index 0000000000..e46db7622b
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteInput.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react'
+import ReactSelect from 'react-select'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isNil } from 'lodash'
+
+const AutocompleteInput = ({ value, options, disabled, isDefault, updateValue }) => {
+  const selectOptions = options.map(option => ({
+    value: option.id,
+    label: option.text
+  }))
+
+  const [inputValue, setInputValue] = useState('')
+  useEffect(() => {
+    setInputValue(selectOptions.find((selectOption) => selectOption.value == value.option))
+  }, [value.id, value.option])
+
+  const handleChange = (selectedOption) => {
+    updateValue(value, {
+      option: isNil(selectedOption) ? null : selectedOption.value
+    })
+  }
+
+  const classnames = classNames({
+    'react-select': true,
+    'default': isDefault
+  })
+
+  return (
+    <ReactSelect
+      classNamePrefix="react-select"
+      className={classnames}
+      isClearable={true}
+      options={selectOptions}
+      value={inputValue}
+      onChange={(option) => {
+        setInputValue(option)
+        handleChange(option)
+      }}
+      isDisabled={disabled}
+    />
+  )
+}
+
+AutocompleteInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  options: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default AutocompleteInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js
index d8726be2e6..026ab2eace 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/AutocompleteWidget.js
@@ -1,72 +1,44 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import ReactSelect from 'react-select'
-import { isNil } from 'lodash'
+
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const AutocompleteInput = ({ value, options, disabled, updateValue }) => {
-  const selectOptions = options.map(option => ({
-    value: option.id,
-    label: option.text
-  }))
-
-  const [inputValue, setInputValue] = useState('')
-  useEffect(() => {
-    setInputValue(selectOptions.find((selectOption) => selectOption.value == value.option))
-  }, [value.id, value.option])
-
-  const handleChange = (selectedOption) => {
-    updateValue(value, {
-      option: isNil(selectedOption) ? null : selectedOption.value
-    })
-  }
+import DefaultBadge from './common/DefaultBadge'
 
-  return (
-    <ReactSelect
-      classNamePrefix="react-select"
-      className="react-select"
-      isClearable={true}
-      options={selectOptions}
-      value={inputValue}
-      onChange={(option) => {
-        setInputValue(option)
-        handleChange(option)
-      }}
-      isDisabled={disabled}
-    />
-  )
-}
-
-AutocompleteInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  options: PropTypes.array.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import AutocompleteInput from './AutocompleteInput'
 
 const AutocompleteWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <AutocompleteInput
+                value={value}
+                options={question.options}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <AutocompleteInput
-              value={value}
-              options={question.options}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxInput.js
new file mode 100644
index 0000000000..c829679442
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxInput.js
@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDebouncedCallback } from 'use-debounce'
+import { isEmpty, isNil } from 'lodash'
+
+import AdditionalTextInput from './common/AdditionalTextInput'
+import AdditionalTextareaInput from './common/AdditionalTextareaInput'
+
+const CheckboxInput = ({ value, option, disabled, onCreate, onUpdate, onDelete }) => {
+
+  const checked = !isNil(value)
+
+  const handleChange = () => {
+    if (checked) {
+      onDelete(value)
+    } else {
+      onCreate(option)
+    }
+  }
+
+  const handleAdditionalValueChange = useDebouncedCallback((value, option, additionalValue) => {
+    if (checked) {
+      onUpdate(value, { text: additionalValue, option: option.id })
+    } else {
+      onCreate(option, additionalValue)
+    }
+  }, 500)
+
+  return (
+    <div className="checkbox">
+      <label>
+        <input
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={() => handleChange()}
+        />
+        <span>{option.text}</span>
+        {
+          isEmpty(option.additional_input) && (
+            <span className="text-muted">{option.help}</span>
+          )
+        }
+        {
+          option.additional_input == 'text' && (
+            <>
+              <span>:</span>
+              {' '}
+              <AdditionalTextInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
+              {' '}
+              <span className="text-muted">{option.help}</span>
+            </>
+          )
+        }
+        {
+          option.additional_input == 'textarea' && (
+            <>
+              <span>:</span>
+              {' '}
+              <AdditionalTextareaInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
+              {' '}
+              <div className="text-muted">{option.help}</div>
+            </>
+          )
+        }
+      </label>
+    </div>
+  )
+}
+
+CheckboxInput.propTypes = {
+  value: PropTypes.object,
+  option: PropTypes.object,
+  disabled: PropTypes.bool,
+  onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+}
+
+export default CheckboxInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxWidget.js
index f32470ed4d..7e9ae0e1c5 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/CheckboxWidget.js
@@ -1,81 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useDebouncedCallback } from 'use-debounce'
-import { isEmpty, isNil, maxBy } from 'lodash'
+import { isNil, maxBy } from 'lodash'
 
-import AdditionalTextInput from './common/AdditionalTextInput'
-import AdditionalTextareaInput from './common/AdditionalTextareaInput'
-
-const CheckboxInput = ({ value, option, disabled, onCreate, onUpdate, onDelete }) => {
-
-  const checked = !isNil(value)
-
-  const handleChange = () => {
-    if (checked) {
-      onDelete(value)
-    } else {
-      onCreate(option)
-    }
-  }
-
-  const handleAdditionalValueChange = useDebouncedCallback((value, option, additionalValue) => {
-    if (checked) {
-      onUpdate(value, { text: additionalValue, option: option.id })
-    } else {
-      onCreate(option, additionalValue)
-    }
-  }, 500)
-
-  return (
-    <div className="checkbox">
-      <label>
-        <input
-          type="checkbox"
-          checked={checked}
-          disabled={disabled}
-          onChange={() => handleChange()}
-        />
-        <span>{option.text}</span>
-        {
-          isEmpty(option.additional_input) && (
-            <span className="text-muted">{option.help}</span>
-          )
-        }
-        {
-          option.additional_input == 'text' && (
-            <>
-              <span>:</span>
-              {' '}
-              <AdditionalTextInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
-              {' '}
-              <span className="text-muted">{option.help}</span>
-            </>
-          )
-        }
-        {
-          option.additional_input == 'textarea' && (
-            <>
-              <span>:</span>
-              {' '}
-              <AdditionalTextareaInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
-              {' '}
-              <div className="text-muted">{option.help}</div>
-            </>
-          )
-        }
-      </label>
-    </div>
-  )
-}
-
-CheckboxInput.propTypes = {
-  value: PropTypes.object,
-  option: PropTypes.object,
-  disabled: PropTypes.bool,
-  onCreate: PropTypes.func.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
-}
+import CheckboxInput from './CheckboxInput'
 
 const CheckboxWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
 
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateInput.js
new file mode 100644
index 0000000000..ce3c495c7b
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateInput.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DatePicker from 'react-datepicker'
+import classNames from 'classnames'
+import { enGB, de, it, es, fr } from 'date-fns/locale'
+
+import lang from 'rdmo/core/assets/js/utils/lang'
+
+const DateInput = ({ value, disabled, isDefault, updateValue }) => {
+
+  const getLocale = () => {
+    switch (lang) {
+      case 'de':
+        return de
+      case 'it':
+        return it
+      case 'es':
+        return es
+      case 'fr':
+        return fr
+      default:
+        return enGB
+    }
+  }
+
+  const getDateFormat = () => {
+    switch (lang) {
+      case 'de':
+        return 'dd.MM.yyyy'
+      case 'it':
+        return 'dd/MM/yyyy'
+      case 'es':
+        return 'dd/MM/yyyy'
+      case 'fr':
+        return 'dd/MM/yyyy'
+      default:
+        return 'dd/MM/yyyy'
+    }
+  }
+
+  const handleChange = (date) => {
+    const text = date.toISOString().slice(0,10)
+    updateValue(value, { text })
+  }
+
+  const classnames = classNames({
+    'form-control': true,
+    'date-control': true,
+    'default': isDefault
+  })
+
+  return (
+    <DatePicker
+      className={classnames}
+      selected={value.text}
+      onChange={(date) => handleChange(date)}
+      locale={getLocale()}
+      dateFormat={getDateFormat()}
+      disabled={disabled}
+    />
+  )
+}
+
+DateInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default DateInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js
index e456e946d0..3d8b7b5608 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/DateWidget.js
@@ -1,88 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import DatePicker from 'react-datepicker'
-import { enGB, de, it, es, fr } from 'date-fns/locale'
 
-import lang from 'rdmo/core/assets/js/utils/lang'
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const DateInput = ({ value, disabled, updateValue }) => {
+import DefaultBadge from './common/DefaultBadge'
 
-  const getLocale = () => {
-    switch (lang) {
-      case 'de':
-        return de
-      case 'it':
-        return it
-      case 'es':
-        return es
-      case 'fr':
-        return fr
-      default:
-        return enGB
-    }
-  }
-
-  const getDateFormat = () => {
-    switch (lang) {
-      case 'de':
-        return 'dd.MM.yyyy'
-      case 'it':
-        return 'dd/MM/yyyy'
-      case 'es':
-        return 'dd/MM/yyyy'
-      case 'fr':
-        return 'dd/MM/yyyy'
-      default:
-        return 'dd/MM/yyyy'
-    }
-  }
-
-  const handleChange = (date) => {
-    const text = date.toISOString().slice(0,10)
-    updateValue(value, { text })
-  }
-
-  return (
-    <DatePicker
-      className="form-control date-control"
-      selected={value.text}
-      onChange={(date) => handleChange(date)}
-      locale={getLocale()}
-      dateFormat={getDateFormat()}
-      disabled={disabled}
-    />
-  )
-}
-
-DateInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import DateInput from './DateInput'
 
 const DateWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <DateInput
+                value={value}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <DateInput
-              value={value}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileInput.js
new file mode 100644
index 0000000000..9495021ef3
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileInput.js
@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDropzone } from 'react-dropzone'
+
+const FileInput = ({ value, disabled, updateValue }) => {
+  const onDrop = useCallback(acceptedFiles => {
+    if (acceptedFiles.length == 1) {
+      updateValue(value, { file: acceptedFiles[0] })
+    }
+  }, [])
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, disabled })
+
+  const classnames = classNames({
+    'dropzone': true,
+    'disabled': disabled
+  })
+
+  return (
+    <div className="file-control">
+      <div {...getRootProps({className: classnames})}>
+        <input {...getInputProps()} />
+        <p className="text-muted">
+          {
+            isDragActive ? (
+              <span>{gettext('Drop the files here ...')}</span>
+            ) : (
+              <span>{gettext('Drag \'n drop some files here, or click to select files.')}</span>
+            )
+          }
+        </p>
+        <p>
+          <span>{gettext('Current file: ')}</span>
+          <a href={value.file_url} onClick={(event) => event.stopPropagation()}>
+            {value.file_name}
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+FileInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default FileInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js
index eceef37f48..b76e51869a 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/FileWidget.js
@@ -1,74 +1,42 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { useDropzone } from 'react-dropzone'
+
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const FileInput = ({ value, disabled, updateValue }) => {
-  const onDrop = useCallback(acceptedFiles => {
-    if (acceptedFiles.length == 1) {
-      updateValue(value, { file: acceptedFiles[0] })
-    }
-  }, [])
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, disabled })
-
-  const classnames = classNames({
-    'dropzone': true,
-    'disabled': disabled
-  })
+import DefaultBadge from './common/DefaultBadge'
 
-  return (
-    <div className="file-control">
-      <div {...getRootProps({className: classnames})}>
-        <input {...getInputProps()} />
-        <p className="text-muted">
-          {
-            isDragActive ? (
-              <span>{gettext('Drop the files here ...')}</span>
-            ) : (
-              <span>{gettext('Drag \'n drop some files here, or click to select files.')}</span>
-            )
-          }
-        </p>
-        <p>
-          <span>{gettext('Current file: ')}</span>
-          <a href={value.file_url} onClick={(event) => event.stopPropagation()}>
-            {value.file_name}
-          </a>
-        </p>
-      </div>
-    </div>
-  )
-}
-
-FileInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import FileInput from './FileInput'
 
 const FileWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <FileInput
+                value={value}
+                disabled={disabled}
+                updateValue={updateValue}
+              />
             </div>
-            <FileInput
-              value={value}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioInput.js
new file mode 100644
index 0000000000..2fca85aa62
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioInput.js
@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
+import { isEmpty } from 'lodash'
+
+import AdditionalTextInput from './common/AdditionalTextInput'
+import AdditionalTextareaInput from './common/AdditionalTextareaInput'
+
+const RadioInput = ({ value, options, disabled, isDefault, updateValue }) => {
+
+  const handleChange = (option) => {
+    if (isEmpty(option.additional_input)) {
+      updateValue(value, { option: option.id, text: '' })
+    } else {
+      updateValue(value, { option: option.id })
+    }
+  }
+
+  const handleAdditionalValueChange = useDebouncedCallback((value, option, additionalValue) => {
+    updateValue(value, {
+      option: option.id,
+      text: additionalValue
+    })
+  }, 500)
+
+  const classnames = classNames({
+    'radio-control': true,
+    'default': isDefault
+  })
+
+  return (
+    <div className={classnames}>
+      {
+        isEmpty(options) ? (
+          <div className="text-muted">{gettext('No options are available.')}</div>
+        ) : (
+          options.map((option, optionIndex) => (
+            <div key={optionIndex} className="radio">
+              <label>
+                <input
+                  type="radio"
+                  checked={value.option == option.id}
+                  disabled={disabled}
+                  onChange={() => handleChange(option)}
+                />
+                <span>{option.text}</span>
+                {
+                  isEmpty(option.additional_input) && (
+                    <span className="text-muted">{option.help}</span>
+                  )
+                }
+                {
+                  option.additional_input == 'text' && (
+                    <>
+                      <span>:</span>
+                      {' '}
+                      <AdditionalTextInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
+                      {' '}
+                      <span className="text-muted">{option.help}</span>
+                    </>
+                  )
+                }
+                {
+                  option.additional_input == 'textarea' && (
+                    <>
+                      <span>:</span>
+                      {' '}
+                      <AdditionalTextareaInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
+                      {' '}
+                      <div className="text-muted">{option.help}</div>
+                    </>
+                  )
+                }
+              </label>
+            </div>
+          ))
+        )
+      }
+    </div>
+  )
+}
+
+RadioInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  options: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default RadioInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js
index 64c4152405..9926d0d1f8 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RadioWidget.js
@@ -1,111 +1,45 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useDebouncedCallback } from 'use-debounce'
-import { isEmpty } from 'lodash'
+
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-import AdditionalTextInput from './common/AdditionalTextInput'
-import AdditionalTextareaInput from './common/AdditionalTextareaInput'
-
-const RadioInput = ({ value, options, disabled, updateValue }) => {
+import DefaultBadge from './common/DefaultBadge'
 
-  const handleChange = (option) => {
-    if (isEmpty(option.additional_input)) {
-      updateValue(value, { option: option.id, text: '' })
-    } else {
-      updateValue(value, { option: option.id })
-    }
-  }
 
-  const handleAdditionalValueChange = useDebouncedCallback((value, option, additionalValue) => {
-    updateValue(value, {
-      option: option.id,
-      text: additionalValue
-    })
-  }, 500)
+import RadioInput from './RadioInput'
 
+const RadioWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
-    <div className="radio-control">
+    <div className="interview-collection">
       {
-        isEmpty(options) ? (
-          <div className="text-muted">{gettext('No options are available.')}</div>
-        ) : (
-          options.map((option, optionIndex) => (
-            <div key={optionIndex} className="radio">
-              <label>
-                <input
-                  type="radio"
-                  checked={value.option == option.id}
-                  disabled={disabled}
-                  onChange={() => handleChange(option)}
-                />
-                <span>{option.text}</span>
-                {
-                  isEmpty(option.additional_input) && (
-                    <span className="text-muted">{option.help}</span>
-                  )
-                }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
                 {
-                  option.additional_input == 'text' && (
-                    <>
-                      <span>:</span>
-                      {' '}
-                      <AdditionalTextInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
-                      {' '}
-                      <span className="text-muted">{option.help}</span>
-                    </>
-                  )
+                  isDefault && <DefaultBadge />
                 }
                 {
-                  option.additional_input == 'textarea' && (
-                    <>
-                      <span>:</span>
-                      {' '}
-                      <AdditionalTextareaInput value={value} option={option} disabled={disabled} onChange={handleAdditionalValueChange} />
-                      {' '}
-                      <div className="text-muted">{option.help}</div>
-                    </>
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
                   )
                 }
-              </label>
-            </div>
-          ))
-        )
-      }
-    </div>
-  )
-}
-
-RadioInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  options: PropTypes.array.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
-
-const RadioWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
-  return (
-    <div className="interview-collection">
-      {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+              </div>
+              <RadioInput
+                value={value}
+                options={question.options}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <RadioInput
-              value={value}
-              options={question.options}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeInput.js
new file mode 100644
index 0000000000..689e410cae
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeInput.js
@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useDebouncedCallback } from 'use-debounce'
+import classNames from 'classnames'
+import { isEmpty } from 'lodash'
+
+const RangeInput = ({ value, minimum, maximum, step, disabled, isDefault, updateValue }) => {
+  const [inputValue, setInputValue] = useState('')
+  useEffect(() => {setInputValue(value.text)}, [value.id])
+
+  const handleChange = useDebouncedCallback((value, text) => {
+    updateValue(value, { text })
+  }, 500)
+
+  const classnames = classNames({
+    'range': true,
+    'default': isDefault
+  })
+
+  return (
+    <div className={classnames}>
+      <span className="badge">{inputValue}</span>
+      <input
+        type="range"
+        min={isEmpty(minimum) ? '0' : minimum}
+        max={isEmpty(maximum) ? '100' : maximum}
+        step={isEmpty(step) ? '1' : step}
+        disabled={disabled}
+        value={inputValue}
+        onChange={(event) => {
+          setInputValue(event.target.value)
+          handleChange(value, event.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+RangeInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  minimum: PropTypes.number,
+  maximum: PropTypes.number,
+  step: PropTypes.number,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default RangeInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js
index 830e7c8710..37b7f9530c 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/RangeWidget.js
@@ -1,46 +1,15 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { useDebouncedCallback } from 'use-debounce'
-import { isEmpty, isNil } from 'lodash'
+import {  isNil } from 'lodash'
+
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const RangeInput = ({ value, minimum, maximum, step, disabled, updateValue }) => {
-  const [inputValue, setInputValue] = useState('')
-  useEffect(() => {setInputValue(value.text)}, [value.id])
-
-  const handleChange = useDebouncedCallback((value, text) => {
-    updateValue(value, { text })
-  }, 500)
-
-  return (
-    <div className="range">
-      <span className="badge">{inputValue}</span>
-      <input
-        type="range"
-        min={isEmpty(minimum) ? '0' : minimum}
-        max={isEmpty(maximum) ? '100' : maximum}
-        step={isEmpty(step) ? '1' : step}
-        disabled={disabled}
-        value={inputValue}
-        onChange={(event) => {
-          setInputValue(event.target.value)
-          handleChange(value, event.target.value)
-        }}
-      />
-    </div>
-  )
-}
+import DefaultBadge from './common/DefaultBadge'
 
-RangeInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  minimum: PropTypes.number,
-  maximum: PropTypes.number,
-  step: PropTypes.number,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import RangeInput from './RangeInput'
 
 const RangeWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
 
@@ -52,25 +21,33 @@ const RangeWidget = ({ question, values, currentSet, disabled, createValue, upda
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <RangeInput
+                value={value}
+                minimum={question.minimum}
+                maximum={question.maximum}
+                step={question.step}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <RangeInput
-              value={value}
-              minimum={question.minimum}
-              maximum={question.maximum}
-              step={question.step}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectInput.js
new file mode 100644
index 0000000000..48a837b06b
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectInput.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react'
+import ReactSelect from 'react-select'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isNil } from 'lodash'
+
+const SelectInput = ({ value, options, disabled, isDefault, updateValue }) => {
+  const selectOptions = options.map(option => ({
+    value: option.id,
+    label: option.text
+  }))
+
+  const [inputValue, setInputValue] = useState('')
+  useEffect(() => {
+    setInputValue(selectOptions.find((selectOption) => selectOption.value == value.option))
+  }, [value.id, value.option])
+
+  const handleChange = (selectedOption) => {
+    updateValue(value, {
+      option: isNil(selectedOption) ? null : selectedOption.value
+    })
+  }
+
+  const classnames = classNames({
+    'react-select': true,
+    'default': isDefault
+  })
+
+  return (
+    <ReactSelect
+      classNamePrefix="react-select"
+      className={classnames}
+      isClearable={true}
+      options={selectOptions}
+      value={inputValue}
+      onChange={(option) => {
+        setInputValue(option)
+        handleChange(option)
+      }}
+      isDisabled={disabled}
+    />
+  )
+}
+
+SelectInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  options: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default SelectInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js
index 22337a74fb..143bc528e4 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/SelectWidget.js
@@ -1,72 +1,44 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import ReactSelect from 'react-select'
-import { isNil } from 'lodash'
+
+import { isDefaultValue } from '../../../../utils/value'
 
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const SelectInput = ({ value, options, disabled, updateValue }) => {
-  const selectOptions = options.map(option => ({
-    value: option.id,
-    label: option.text
-  }))
-
-  const [inputValue, setInputValue] = useState('')
-  useEffect(() => {
-    setInputValue(selectOptions.find((selectOption) => selectOption.value == value.option))
-  }, [value.id, value.option])
-
-  const handleChange = (selectedOption) => {
-    updateValue(value, {
-      option: isNil(selectedOption) ? null : selectedOption.value
-    })
-  }
+import DefaultBadge from './common/DefaultBadge'
 
-  return (
-    <ReactSelect
-      classNamePrefix="react-select"
-      className="react-select"
-      isClearable={true}
-      options={selectOptions}
-      value={inputValue}
-      onChange={(option) => {
-        setInputValue(option)
-        handleChange(option)
-      }}
-      isDisabled={disabled}
-    />
-  )
-}
-
-SelectInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  options: PropTypes.array.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import SelectInput from './SelectInput'
 
 const SelectWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <SelectInput
+                value={value}
+                options={question.options}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <SelectInput
-              value={value}
-              options={question.options}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js
new file mode 100644
index 0000000000..639d8da941
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js
@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
+
+import useFocusEffect from '../../../../hooks/useFocusEffect'
+
+const TextInput = ({ value, disabled, isDefault, focus, updateValue }) => {
+  const ref = useRef(null)
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => {setInputValue(value.text)}, [value.id])
+  useFocusEffect(ref, [value.text], focus)
+
+  const handleChange = useDebouncedCallback((value, text) => {
+    updateValue(value, { text })
+  }, 500)
+
+  const classnames = classNames({
+    'form-control': true,
+    'default': isDefault
+  })
+
+  return (
+    <input
+      ref={ref}
+      type="text"
+      className={classnames}
+      disabled={disabled}
+      value={inputValue}
+      onChange={(event) => {
+        setInputValue(event.target.value)
+        handleChange(value, event.target.value)
+      }}
+    />
+  )
+}
+
+TextInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  focus: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired,
+}
+
+export default TextInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js
index 52d79a31f2..00500efbdc 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextWidget.js
@@ -1,71 +1,43 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { useDebouncedCallback } from 'use-debounce'
 
-import useFocusEffect from '../../../../hooks/useFocusEffect'
+import { isDefaultValue } from '../../../../utils/value'
 
+import DefaultBadge from './common/DefaultBadge'
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const TextInput = ({ value, disabled, focus, updateValue }) => {
-  const ref = useRef(null)
-  const [inputValue, setInputValue] = useState('')
-
-  useEffect(() => {setInputValue(value.text)}, [value.id])
-  useFocusEffect(ref, [value.text], focus)
-
-  const handleChange = useDebouncedCallback((value, text) => {
-    updateValue(value, { text })
-  }, 500)
-
-  const classnames = classNames({
-    'form-control': true
-  })
-
-  return (
-    <input
-      ref={ref}
-      type="text"
-      className={classnames}
-      disabled={disabled}
-      value={inputValue}
-      onChange={(event) => {
-        setInputValue(event.target.value)
-        handleChange(value, event.target.value)
-      }}
-    />
-  )
-}
-
-TextInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired,
-}
+import TextInput from './TextInput'
 
 const TextWidget = ({ question, values, currentSet, disabled, focus, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <TextInput
+                value={value}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+                focus={focus && valueIndex == values.length - 1}
+              />
             </div>
-            <TextInput
-              value={value}
-              disabled={disabled}
-              updateValue={updateValue}
-              focus={focus && valueIndex == values.length - 1}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaInput.js
new file mode 100644
index 0000000000..d84438f56c
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaInput.js
@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
+
+import useFocusEffect from '../../../../hooks/useFocusEffect'
+
+const TextareaInput = ({ value, disabled, isDefault, focus, updateValue }) => {
+  const ref = useRef(null)
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => {setInputValue(value.text)}, [value.id])
+  useFocusEffect(ref, [value.text], focus)
+
+  const handleChange = useDebouncedCallback((value, text) => {
+    updateValue(value, { text })
+  }, 500)
+
+  const classnames = classNames({
+    'form-control': true,
+    'default': isDefault
+  })
+
+  return (
+    <textarea
+      ref={ref}
+      rows={6}
+      className={classnames}
+      disabled={disabled}
+      value={inputValue}
+      onChange={(event) => {
+        setInputValue(event.target.value)
+        handleChange(value, event.target.value)
+      }}
+    />
+  )
+}
+
+TextareaInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  focus: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default TextareaInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js
index b5ef279e65..bd604bdb5b 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/TextareaWidget.js
@@ -1,71 +1,43 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { useDebouncedCallback } from 'use-debounce'
 
-import useFocusEffect from '../../../../hooks/useFocusEffect'
+import { isDefaultValue } from '../../../../utils/value'
 
+import DefaultBadge from './common/DefaultBadge'
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const TextareaInput = ({ value, disabled, focus, updateValue }) => {
-  const ref = useRef(null)
-  const [inputValue, setInputValue] = useState('')
-
-  useEffect(() => {setInputValue(value.text)}, [value.id])
-  useFocusEffect(ref, [value.text], focus)
-
-  const handleChange = useDebouncedCallback((value, text) => {
-    updateValue(value, { text })
-  }, 500)
-
-  const classnames = classNames({
-    'form-control': true
-  })
-
-  return (
-    <textarea
-      ref={ref}
-      rows={6}
-      className={classnames}
-      disabled={disabled}
-      value={inputValue}
-      onChange={(event) => {
-        setInputValue(event.target.value)
-        handleChange(value, event.target.value)
-      }}
-    />
-  )
-}
-
-TextareaInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import TextareaInput from './TextareaInput'
 
 const TextareaWidget = ({ question, values, currentSet, disabled, focus, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <TextareaInput
+                value={value}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+                focus={focus && valueIndex == values.length - 1}
+              />
             </div>
-            <TextareaInput
-              value={value}
-              disabled={disabled}
-              updateValue={updateValue}
-              focus={focus && valueIndex == values.length - 1}
-            />
-          </div>
-        ))
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js
new file mode 100644
index 0000000000..de1163dd4c
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoInput.js
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const YesNoInput = ({ value, disabled, isDefault, updateValue }) => {
+  const [inputValue, setInputValue] = useState('')
+  useEffect(() => {setInputValue(value.text)}, [value.id])
+
+  const handleChange = (value, text) => {
+    updateValue(value, { text })
+  }
+
+  const classnames = classNames({
+    'radio-control': true,
+    'default': isDefault
+  })
+
+  return (
+    <div className={classnames}>
+      <div className="radio yesno">
+        <label>
+            <input
+              type="radio"
+              value="1"
+              disabled={disabled}
+              checked={inputValue == '1'}
+              onChange={(event) => {
+                setInputValue(event.target.value)
+                handleChange(value, event.target.value)
+              }} />
+            <span>{gettext('Yes')}</span>
+        </label>
+        <label>
+            <input
+              type="radio"
+              value="0"
+              checked={inputValue == '0'}
+              disabled={disabled}
+              onChange={(event) => {
+                setInputValue(event.target.value)
+                handleChange(value, event.target.value)
+              }} />
+            <span>{gettext('No')}</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+
+YesNoInput.propTypes = {
+  value: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  isDefault: PropTypes.bool,
+  updateValue: PropTypes.func.isRequired
+}
+
+export default YesNoInput
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js
index 0060ff509a..fe6e88312f 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/YesNoWidget.js
@@ -1,75 +1,44 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
+import { isDefaultValue } from '../../../../utils/value'
+
 import QuestionAddValue from '../QuestionAddValue'
 import QuestionRemoveValue from '../QuestionRemoveValue'
 
-const YesNoInput = ({ value, disabled, updateValue }) => {
-  const [inputValue, setInputValue] = useState('')
-  useEffect(() => {setInputValue(value.text)}, [value.id])
-
-  const handleChange = (value, text) => {
-    updateValue(value, { text })
-  }
-
-  return (
-    <div className="radio-control">
-      <div className="radio yesno">
-        <label>
-            <input
-              type="radio"
-              value="1"
-              disabled={disabled}
-              checked={inputValue == '1'}
-              onChange={(event) => {
-                setInputValue(event.target.value)
-                handleChange(value, event.target.value)
-              }} />
-            <span>{gettext('Yes')}</span>
-        </label>
-        <label>
-            <input
-              type="radio"
-              value="0"
-              checked={inputValue == '0'}
-              disabled={disabled}
-              onChange={(event) => {
-                setInputValue(event.target.value)
-                handleChange(value, event.target.value)
-              }} />
-            <span>{gettext('No')}</span>
-        </label>
-      </div>
-    </div>
-  )
-}
+import DefaultBadge from './common/DefaultBadge'
 
-YesNoInput.propTypes = {
-  value: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  updateValue: PropTypes.func.isRequired
-}
+import YesNoInput from './YesNoInput'
 
 const YesNoWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-collection">
       {
-        values.map((value, valueIndex) => (
-          <div key={valueIndex} className="interview-input">
-            <div className="interview-input-options">
-              {
-                (question.is_collection || values.length > 1) && (
-                  <QuestionRemoveValue value={value} deleteValue={deleteValue} />
-                )
-              }
+        values.map((value, valueIndex) => {
+          const isDefault = isDefaultValue(question, value)
+
+          return (
+            <div key={valueIndex} className="interview-input">
+              <div className="interview-input-options">
+                {
+                  isDefault && <DefaultBadge />
+                }
+                {
+                  (question.is_collection || values.length > 1) && (
+                    <QuestionRemoveValue value={value} deleteValue={deleteValue} />
+                  )
+                }
+              </div>
+              <YesNoInput
+                value={value}
+                disabled={disabled}
+                isDefault={isDefault}
+                updateValue={updateValue}
+              />
             </div>
-            <YesNoInput
-              value={value}
-              disabled={disabled}
-              updateValue={updateValue}
-            />
-          </div>
-        ))
+
+          )
+        })
       }
       {
         question.is_collection && (
diff --git a/rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js b/rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js
new file mode 100644
index 0000000000..baac2ede2b
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/main/question/widgets/common/DefaultBadge.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DefaultBadge = () => {
+  return (
+    <div className="badge badge-default" title={gettext('This is a default answer that can be customized.')}>
+      {gettext('Default')}
+    </div>
+  )
+}
+
+export default DefaultBadge
diff --git a/rdmo/projects/assets/js/interview/utils/value.js b/rdmo/projects/assets/js/interview/utils/value.js
index 75352d3c90..06cf2e9730 100644
--- a/rdmo/projects/assets/js/interview/utils/value.js
+++ b/rdmo/projects/assets/js/interview/utils/value.js
@@ -1,9 +1,23 @@
-import { isNil } from 'lodash'
+import { isNil, toString } from 'lodash'
 
 import ValueFactory from '../factories/ValueFactory'
 
 import { getChildPrefix } from './set'
 
+const isDefaultValue = (question, value) => {
+  if (isNil(value.id)) {
+    if (question.default_text) {
+      return question.default_text == value.text
+    } else if (question.default_option) {
+      return toString(question.default_option) == value.option
+    } else if (question.default_external_id) {
+      return question.default_external_id == value.external_id
+    }
+  } else {
+    return false
+  }
+}
+
 const initValues = (sets, values, element, setPrefix) => {
   if (isNil(setPrefix)) {
     setPrefix = ''
@@ -19,11 +33,14 @@ const initValues = (sets, values, element, setPrefix) => {
         const value = ValueFactory.create({
           attribute: question.attribute,
           set_prefix: set.set_prefix,
-          set_index: set.set_index
+          set_index: set.set_index,
+          text: question.default_text,
+          option: question.default_option,
+          external_id: question.default_external_id
         })
 
         if (question.widget_class === 'range') {
-          initRange(value)
+          initRange(question, value)
         }
 
         values.push(value)
@@ -37,7 +54,9 @@ const initValues = (sets, values, element, setPrefix) => {
 }
 
 const initRange = (question, value) => {
-  value.text = isNil(question.minimum) ? 0 : question.minimum
+  if (isNil(value.text)) {
+    value.text = isNil(question.minimum) ? 0 : question.minimum
+  }
 }
 
-export { initValues, initRange }
+export { isDefaultValue, initValues, initRange }
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index c018194657..a125acee97 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -189,14 +189,16 @@
         top: 0;
         right: 0;
         z-index: 5;
+        margin-right: 8px;
 
         .btn-reset-value,
         .btn-remove-value {
             opacity: 0.8;
             line-height: 20px;
             font-size: 14px;
-            padding-left: 8px;
-            padding-right: 8px;
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: 4px;
         }
 
         // .btn-remove-value {
@@ -213,11 +215,22 @@
             outline: 0;
         }
 
-        .badge-default-value {
+        .badge-default {
+            cursor: help;
             color: #999;
             border: 1px solid #999;
             background-color: white;
-            margin-top: -2px;
+            margin: 7px 0 7px 0;
+        }
+    }
+
+    .default {
+        color: #999;
+
+        .badge,
+        input[type='radio'],
+        input[type='range'] {
+            opacity: 0.5;
         }
     }
 }