diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0636262b4..04c66f14d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,12 +8,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 For compatibility information see `govukFrontendVersion` and `hmrcFrontendVersion` in
 [LibDependencies](project/LibDependencies.scala)
 
+## [9.7.0] - 2024-04-19
+
+### Changed
+
+- Added beforeInput(s) and afterInput(s) options to form groups
+
+### Compatible with
+
+- [hmrc/hmrc-frontend v6.15.0](https://github.com/hmrc/hmrc-frontend/releases/tag/v6.15.0)
+- [alphagov/govuk-frontend v5.3.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.3.0)
+
 ## [9.6.1] - 2024-04-15
 
 ### Changed
 
 - Added in caching with a max-age of 60 minutes for hmrc-frontend resources
 
+### Compatible with
+
+- [hmrc/hmrc-frontend v6.15.0](https://github.com/hmrc/hmrc-frontend/releases/tag/v6.15.0)
+- [alphagov/govuk-frontend v5.3.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.3.0)
+
 ## [9.6.0] - 2024-04-10
 
 ### Changed
diff --git a/it-play-30/src/test/scala/uk/gov/hmrc/hmrcfrontend/controllers/AssetsSpec.scala b/it-play-30/src/test/scala/uk/gov/hmrc/hmrcfrontend/controllers/AssetsSpec.scala
index dad4bba11..e20796d17 100644
--- a/it-play-30/src/test/scala/uk/gov/hmrc/hmrcfrontend/controllers/AssetsSpec.scala
+++ b/it-play-30/src/test/scala/uk/gov/hmrc/hmrcfrontend/controllers/AssetsSpec.scala
@@ -18,7 +18,6 @@ package uk.gov.hmrc.hmrcfrontend.controllers
 
 import org.scalatest.TestData
 import org.scalatest.matchers.must.Matchers
-import org.scalatest.matchers._
 import org.scalatest.wordspec.AnyWordSpec
 import org.scalatestplus.play.guice.GuiceOneAppPerTest
 import play.api.Application
diff --git a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/FormGroup.scala b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/FormGroup.scala
index ebbaa2638..cd15dd076 100644
--- a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/FormGroup.scala
+++ b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/FormGroup.scala
@@ -19,10 +19,12 @@ package uk.gov.hmrc.govukfrontend.views.viewmodels
 import play.api.libs.functional.syntax._
 import play.api.libs.json._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.content.Content
+import uk.gov.hmrc.govukfrontend.views.viewmodels.content.Content._
 
 case class FormGroup(
   classes: Option[String] = None,
   attributes: Map[String, String] = Map.empty,
+  beforeInput: Option[Content] = None,
   afterInput: Option[Content] = None
 )
 
@@ -34,6 +36,7 @@ object FormGroup {
     (
       (__ \ "classes").readNullable[String] and
         (__ \ "attributes").readWithDefault[Map[String, String]](Map.empty) and
+        (__ \ "beforeInput").readNullable[Content] and
         (__ \ "afterInput").readNullable[Content]
     )(FormGroup.apply _)
 
@@ -41,7 +44,22 @@ object FormGroup {
     (
       (__ \ "classes").writeNullable[String] and
         (__ \ "attributes").write[Map[String, String]] and
+        (__ \ "beforeInput").writeNullable[Content] and
         (__ \ "afterInput").writeNullable[Content]
     )(unlift(FormGroup.unapply))
 
+  def jsonReadsForMultipleInputs: Reads[FormGroup] = (
+    (__ \ "classes").readNullable[String] and
+      (__ \ "attributes").readWithDefault[Map[String, String]](Map.empty) and
+      (__ \ "beforeInputs").readNullable[Content] and
+      (__ \ "afterInputs").readNullable[Content]
+  )(FormGroup.apply _)
+
+  def jsonWritesForMultipleInputs: OWrites[FormGroup] =
+    (
+      (__ \ "classes").writeNullable[String] and
+        (__ \ "attributes").write[Map[String, String]] and
+        (__ \ "beforeInputs").writeNullable[Content] and
+        (__ \ "afterInputs").writeNullable[Content]
+    )(unlift(FormGroup.unapply))
 }
diff --git a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Checkboxes.scala b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Checkboxes.scala
index 3c5702eeb..738f742b8 100644
--- a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Checkboxes.scala
+++ b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Checkboxes.scala
@@ -21,6 +21,7 @@ import play.api.libs.json._
 import uk.gov.hmrc.govukfrontend.views.html.components._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.CommonJsonFormats._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup
+import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup.{jsonReadsForMultipleInputs, jsonWritesForMultipleInputs}
 
 /** Parameters to `GovukCheckboxes` Twirl template
   *
@@ -61,7 +62,7 @@ object Checkboxes {
         (__ \ "fieldset").readNullable[Fieldset] and
         (__ \ "hint").readNullable[Hint] and
         (__ \ "errorMessage").readNullable[ErrorMessage] and
-        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup) and
+        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup)(jsonReadsForMultipleInputs) and
         (__ \ "idPrefix").readNullable[String] and
         (__ \ "name").readWithDefault[String](defaultObject.name) and
         (__ \ "items").readWithDefault[Seq[CheckboxItem]](defaultObject.items)(forgivingSeqReads[CheckboxItem]) and
@@ -76,7 +77,7 @@ object Checkboxes {
         (__ \ "fieldset").writeNullable[Fieldset] and
         (__ \ "hint").writeNullable[Hint] and
         (__ \ "errorMessage").writeNullable[ErrorMessage] and
-        (__ \ "formGroup").write[FormGroup] and
+        (__ \ "formGroup").write[FormGroup](jsonWritesForMultipleInputs) and
         (__ \ "idPrefix").writeNullable[String] and
         (__ \ "name").write[String] and
         (__ \ "items").write[Seq[CheckboxItem]] and
diff --git a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/DateInput.scala b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/DateInput.scala
index 1b833d44a..b96930386 100644
--- a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/DateInput.scala
+++ b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/DateInput.scala
@@ -20,6 +20,7 @@ import play.api.libs.functional.syntax._
 import play.api.libs.json._
 import uk.gov.hmrc.govukfrontend.views.html.components._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup
+import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup.{jsonReadsForMultipleInputs, jsonWritesForMultipleInputs}
 
 /** Parameters to `GovukDateInput` Twirl template
   *
@@ -56,7 +57,7 @@ object DateInput {
         (__ \ "items").readWithDefault[Seq[InputItem]](defaultObject.items) and
         (__ \ "hint").readNullable[Hint] and
         (__ \ "errorMessage").readNullable[ErrorMessage] and
-        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup) and
+        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup)(jsonReadsForMultipleInputs) and
         (__ \ "fieldset").readNullable[Fieldset] and
         (__ \ "classes").readWithDefault[String](defaultObject.classes) and
         (__ \ "attributes").readWithDefault[Map[String, String]](defaultObject.attributes)
@@ -69,7 +70,7 @@ object DateInput {
         (__ \ "items").write[Seq[InputItem]] and
         (__ \ "hint").writeNullable[Hint] and
         (__ \ "errorMessage").writeNullable[ErrorMessage] and
-        (__ \ "formGroup").write[FormGroup] and
+        (__ \ "formGroup").write[FormGroup](jsonWritesForMultipleInputs) and
         (__ \ "fieldset").writeNullable[Fieldset] and
         (__ \ "classes").write[String] and
         (__ \ "attributes").write[Map[String, String]]
diff --git a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Radios.scala b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Radios.scala
index 47c3c6b3a..15f86ae23 100644
--- a/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Radios.scala
+++ b/play-frontend-hmrc-play-30/src/main/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Radios.scala
@@ -21,6 +21,7 @@ import play.api.libs.json._
 import uk.gov.hmrc.govukfrontend.views.html.components._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.CommonJsonFormats._
 import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup
+import uk.gov.hmrc.govukfrontend.views.viewmodels.FormGroup.{jsonReadsForMultipleInputs, jsonWritesForMultipleInputs}
 
 /** Parameters to `GovukRadios` Twirl template
   *
@@ -58,7 +59,7 @@ object Radios {
       (__ \ "fieldset").readNullable[Fieldset] and
         (__ \ "hint").readNullable[Hint] and
         (__ \ "errorMessage").readNullable[ErrorMessage] and
-        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup) and
+        (__ \ "formGroup").readWithDefault[FormGroup](defaultObject.formGroup)(jsonReadsForMultipleInputs) and
         (__ \ "idPrefix").readNullable[String] and
         (__ \ "name").readWithDefault[String](defaultObject.name) and
         (__ \ "items").readWithDefault[Seq[RadioItem]](defaultObject.items)(forgivingSeqReads[RadioItem]) and
@@ -72,7 +73,7 @@ object Radios {
       (__ \ "fieldset").writeNullable[Fieldset] and
         (__ \ "hint").writeNullable[Hint] and
         (__ \ "errorMessage").writeNullable[ErrorMessage] and
-        (__ \ "formGroup").write[FormGroup] and
+        (__ \ "formGroup").write[FormGroup](jsonWritesForMultipleInputs) and
         (__ \ "idPrefix").writeNullable[String] and
         (__ \ "name").write[String] and
         (__ \ "items").write[Seq[RadioItem]] and
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCharacterCount.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCharacterCount.scala.html
index e4825a26b..98a093a27 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCharacterCount.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCharacterCount.scala.html
@@ -83,6 +83,7 @@
     formGroup = formGroup.copy(
         classes = Some(toClasses("govuk-character-count", formGroup.classes.getOrElse(""))),
         attributes = dataAttributes ++ formGroup.attributes,
+        beforeInput = formGroup.beforeInput,
         afterInput = Some(HtmlContent(characterCountMessagePlusOptionalAfterInput))
     ),
     classes = toClasses("govuk-js-character-count", if (classes.isEmpty) "" else s" $classes"),
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCheckboxes.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCheckboxes.scala.html
index 053f21ce7..65976995c 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCheckboxes.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukCheckboxes.scala.html
@@ -57,6 +57,7 @@
 
 @divSnippet(describedBy: String) = {
   <div class="@toClasses("govuk-checkboxes", classes)"@toAttributes(attributes) data-module="govuk-checkboxes">
+    @{formGroup.beforeInput.map(_.asHtml)}
     @for((item, index) <- items.zip(LazyList from 1)) {
       @if(item.divider.exists(_.nonEmpty)) {
         <div class="govuk-checkboxes__divider">@item.divider</div>
@@ -89,6 +90,7 @@
         }
       }
     }
+    @{formGroup.afterInput.map(_.asHtml)}
   </div>
 }
 
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukDateInput.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukDateInput.scala.html
index d2076098c..6fe50f72b 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukDateInput.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukDateInput.scala.html
@@ -60,6 +60,7 @@
 
 @divSnippet(unusedDescribedBy: String) = {
   <div class="@toClasses("govuk-date-input", classes)"@toAttributes(attributes) id="@id">
+    @{formGroup.beforeInput.map(_.asHtml)}
     @for(item <- dateInputItems) {
       <div class="govuk-date-input__item">
         @govukInput(Input(
@@ -80,6 +81,7 @@
         ))
       </div>
     }
+    @{formGroup.afterInput.map(_.asHtml)}
   </div>
 }
 
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukFileUpload.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukFileUpload.scala.html
index 54b8488f3..1fa7d8101 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukFileUpload.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukFileUpload.scala.html
@@ -37,6 +37,8 @@
   @defining {
     id="@id" name="@name" type="file"@value.mapNonEmpty { value => value="@value" }@if(disabled.getOrElse(false)) { disabled}@if(describedBy.nonEmpty) { aria-describedby="@describedBy"}@toAttributes(attributes)
   } { attrs =>
+      @formGroup.beforeInput.map(_.asHtml)
       <input class="@toClasses("govuk-file-upload", classes, errorMessage.fold("")(_ => "govuk-file-upload--error"))" @attrs>
+      @formGroup.afterInput.map(_.asHtml)
   }
 }
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukInput.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukInput.scala.html
index 5c5ae9688..da8c570f7 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukInput.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukInput.scala.html
@@ -33,24 +33,24 @@
   @govukHintAndErrorMessage(id, describedBy, hint, errorMessage)(inputSnippet)
 }
 
-@inputPrefix(prefix: Option[PrefixOrSuffix], hasPrefix: Boolean, hasSuffix: Boolean, hasAfterInput: Boolean) = {@maybeWrapperStart(hasPrefix, hasSuffix, hasAfterInput)@maybePrefix(prefix, hasPrefix)}
+@inputPrefix(prefix: Option[PrefixOrSuffix], hasPrefix: Boolean, hasSuffix: Boolean, hasBeforeInput: Boolean, hasAfterInput: Boolean) = {@maybeWrapperStart(hasPrefix, hasSuffix, hasBeforeInput, hasAfterInput)@maybePrefix(prefix, hasPrefix)}
 
 @maybePrefix(prefix: Option[PrefixOrSuffix], hasPrefix: Boolean) ={@if(hasPrefix) {<div class="@toClasses("govuk-input__prefix", prefix.get.classes)" aria-hidden="true"@toAttributes(prefix.get.attributes)>@prefix.get.content.asHtml</div>
 }}
 
-@maybeWrapperStart(hasPrefix: Boolean, hasSuffix: Boolean, hasAfterInput: Boolean) = {@if(hasPrefix || hasSuffix || hasAfterInput) {
-    <div class="@toClasses("govuk-input__wrapper", inputWrapper.classes.getOrElse(""))"@toAttributes(inputWrapper.attributes)>
+@maybeWrapperStart(hasPrefix: Boolean, hasSuffix: Boolean, hasBeforeInput: Boolean, hasAfterInput: Boolean) = {@if(hasPrefix || hasSuffix || hasBeforeInput || hasAfterInput) {
+    <div class="@toClasses("govuk-input__wrapper", inputWrapper.classes.getOrElse(""))"@toAttributes(inputWrapper.attributes)> @{formGroup.beforeInput.map(_.asHtml)}
 }}
 
-@inputSuffix(suffix: Option[PrefixOrSuffix], hasPrefix: Boolean, hasSuffix: Boolean) = {
-    @maybeSuffix(suffix, hasSuffix)@maybeWrapperEnd(hasPrefix: Boolean, hasSuffix: Boolean)
+@inputSuffix(suffix: Option[PrefixOrSuffix], hasPrefix: Boolean, hasSuffix: Boolean, hasBeforeInput: Boolean, hasAfterInput: Boolean) = {
+    @maybeSuffix(suffix, hasSuffix)@maybeWrapperEnd(hasPrefix: Boolean, hasSuffix: Boolean, hasBeforeInput: Boolean, hasAfterInput: Boolean)
 }
 
 @maybeSuffix(suffix: Option[PrefixOrSuffix], hasSuffix: Boolean) = {@if(hasSuffix) {
     <div class="@toClasses("govuk-input__suffix", suffix.get.classes)" aria-hidden="true"@toAttributes(suffix.get.attributes)>@suffix.get.content.asHtml</div>
 }}
 
-@maybeWrapperEnd(hasPrefix: Boolean, hasSuffix: Boolean) = {@if(hasPrefix || hasSuffix) {</div>}}
+@maybeWrapperEnd(hasPrefix: Boolean, hasSuffix: Boolean, hasBeforeInput: Boolean, hasAfterInput: Boolean) = {@if(hasPrefix || hasSuffix || hasBeforeInput || hasAfterInput) {@{formGroup.afterInput.map(_.asHtml)} </div>}}
 
 @inputSnippet(describedBy: String) = {
   @defining {
@@ -60,6 +60,6 @@
   @defining {
     @autocomplete.mapNonEmpty { autocomplete => autocomplete="@autocomplete"}@pattern.mapNonEmpty { pattern => pattern="@pattern"}@inputmode.mapNonEmpty { inputmode => inputmode="@inputmode"}@autocapitalize.map {v => autocapitalize="@v"}@toAttributes(attributes)
   } { otherAttrs =>
-      @(inputPrefix(params.prefix, params.prefix.nonEmpty, params.suffix.nonEmpty, formGroup.afterInput.nonEmpty))<input class="@toClasses("govuk-input", classes, errorMessage.fold("")(_ => "govuk-input--error"))" @attrs@otherAttrs>@(inputSuffix(params.suffix, params.prefix.nonEmpty, params.suffix.nonEmpty))@formGroup.afterInput.map(_.asHtml)
+      @(inputPrefix(params.prefix, params.prefix.nonEmpty, params.suffix.nonEmpty, formGroup.beforeInput.filter(_.nonEmpty), formGroup.afterInput.filter(_.nonEmpty))) <input class="@toClasses("govuk-input", classes, errorMessage.fold("")(_ => "govuk-input--error"))" @attrs@otherAttrs> @(inputSuffix(params.suffix, params.prefix.nonEmpty, params.suffix.nonEmpty, formGroup.beforeInput.filter(_.nonEmpty), formGroup.afterInput.filter(_.nonEmpty)))
   }}
 }
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukRadios.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukRadios.scala.html
index 695b5b35a..031c891ff 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukRadios.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukRadios.scala.html
@@ -52,6 +52,7 @@
 
 @divSnippet(unusedDescribedBy: String) = {
   <div class="@toClasses("govuk-radios", classes)"@toAttributes(attributes) data-module="govuk-radios">
+  @{formGroup.beforeInput.map(_.asHtml)}
   @for((item, index) <- items.zip(LazyList from 1)) {
     @defining(itemId(item, index)) { id =>
     @defining(s"conditional-$id") { conditionalId =>
@@ -94,6 +95,7 @@
       }
     }}
   }
+  @{formGroup.afterInput.map(_.asHtml)}
   </div>
 }
 
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukSelect.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukSelect.scala.html
index 0089b64cd..070296842 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukSelect.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukSelect.scala.html
@@ -40,6 +40,7 @@
   @defining {
     id="@id" name="@name"@if(disabled.getOrElse(false)) { disabled} @describedBy.toOption.map { describedBy => aria-describedby="@describedBy"}@toAttributes(attributes)
   } { attrs =>
+      @{formGroup.beforeInput.map(_.asHtml)}
       <select class="@toClasses("govuk-select", classes, errorMessage.fold("")(_ => "govuk-select--error"))" @attrs>
         @for(item <- items) {
           @defining((value.nonEmpty && item.value == value) || item.selected) { isSelected =>
@@ -52,5 +53,6 @@
           }
         }
       </select>
+      @{formGroup.afterInput.map(_.asHtml)}
   }
 }
diff --git a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukTextarea.scala.html b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukTextarea.scala.html
index 74ed42bd2..93eb66cb1 100644
--- a/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukTextarea.scala.html
+++ b/play-frontend-hmrc-play-30/src/main/twirl/uk/gov/hmrc/govukfrontend/views/components/GovukTextarea.scala.html
@@ -41,6 +41,6 @@
   @defining {
     id="@id" name="@name" rows="@if(rows != 0) {@rows} else {5}"@if(describedBy.nonEmpty) { aria-describedby="@describedBy"}@autocompleteAttr@if(spellcheck.nonEmpty){spellcheck="@if(spellcheck.getOrElse(true)){true}else{false}"}@if(disabled.getOrElse(false)) { disabled} @toAttributes(attributes)
   } { attrs =>
-    <textarea class="@toClasses("govuk-textarea", errorMessage.fold("")(_ => "govuk-textarea--error"), classes)" @attrs>@value.mapNonEmpty { value =>@HtmlFormat.escape(value)}</textarea>
+      @formGroup.beforeInput.map(_.asHtml) <textarea class="@toClasses("govuk-textarea", errorMessage.fold("")(_ => "govuk-textarea--error"), classes)" @attrs>@value.mapNonEmpty { value =>@HtmlFormat.escape(value)}</textarea>
   }}
 }
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/component.json
new file mode 100644
index 000000000..45804c377
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukCharacterCount"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..acf21722b
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,16 @@
+{
+  "id" : "with-formgroup",
+  "name" : "with-formgroup",
+  "maxlength" : 10,
+  "label" : {
+    "text" : "With formgroup"
+  },
+  "formGroup" : {
+    "beforeInput": { "html": "<p>test before</p>"},
+    "afterInput": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..ffd533fc7
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,11 @@
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="with-formgroup">
+    With formgroup
+  </label>
+  <p>test before</p>
+  <textarea class="govuk-textarea govuk-js-character-count" id="with-formgroup" name="with-formgroup" rows="5" aria-describedby="with-formgroup-info"></textarea>
+  <div id="with-formgroup-info" class="govuk-hint govuk-character-count__message">
+    You can enter up to 10 characters
+  </div>
+  <p>test after</p>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..45804c377
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukCharacterCount"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..d143db13b
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,16 @@
+{
+  "id" : "with-formgroup",
+  "name" : "with-formgroup",
+  "maxlength" : 10,
+  "label" : {
+    "text" : "With formgroup"
+  },
+  "formGroup" : {
+    "beforeInput": { "text": "test before"},
+    "afterInput": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..c20d2a200
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/character-count-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,11 @@
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="with-formgroup">
+    With formgroup
+  </label>
+  test before
+  <textarea class="govuk-textarea govuk-js-character-count" id="with-formgroup" name="with-formgroup" rows="5" aria-describedby="with-formgroup-info"></textarea>
+  <div id="with-formgroup-info" class="govuk-hint govuk-character-count__message">
+    You can enter up to 10 characters
+  </div>
+  test after
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/component.json
new file mode 100644
index 000000000..acbaf0497
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukCheckboxes"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..4475ebc7f
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,37 @@
+{
+  "name" : "how-contacted-checked",
+  "idPrefix" : "how-contacted-checked",
+  "formGroup" : {
+    "beforeInputs": { "html": "<p>test before</p>"},
+    "afterInputs": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "fieldset" : {
+    "legend" : {
+      "text" : "How do you want to be contacted?"
+    }
+  },
+  "items" : [ {
+    "value" : "email",
+    "text" : "Email",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+    }
+  }, {
+    "value" : "phone",
+    "text" : "Phone",
+    "checked" : true,
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+    }
+  }, {
+    "value" : "text",
+    "text" : "Text message",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+    }
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..e4f233be4
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,42 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      How do you want to be contacted?
+    </legend>
+    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+      <p>test before</p>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked" name="how-contacted-checked" type="checkbox" value="email" data-aria-controls="conditional-how-contacted-checked">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked">
+          Email
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked">
+        <label class="govuk-label" for="context-email">Email address</label>
+        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" checked data-aria-controls="conditional-how-contacted-checked-2">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked-2">
+        <label class="govuk-label" for="contact-phone">Phone number</label>
+        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
+        <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+      </div>
+      <p>test after</p>
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..acbaf0497
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukCheckboxes"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..a2845309d
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,37 @@
+{
+  "name" : "how-contacted-checked",
+  "idPrefix" : "how-contacted-checked",
+  "formGroup" : {
+    "beforeInputs": { "text": "test before"},
+    "afterInputs": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "fieldset" : {
+    "legend" : {
+      "text" : "How do you want to be contacted?"
+    }
+  },
+  "items" : [ {
+    "value" : "email",
+    "text" : "Email",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+    }
+  }, {
+    "value" : "phone",
+    "text" : "Phone",
+    "checked" : true,
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+    }
+  }, {
+    "value" : "text",
+    "text" : "Text message",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+    }
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..75b013223
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/checkboxes-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,42 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      How do you want to be contacted?
+    </legend>
+    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+      test before
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked" name="how-contacted-checked" type="checkbox" value="email" data-aria-controls="conditional-how-contacted-checked">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked">
+          Email
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked">
+        <label class="govuk-label" for="context-email">Email address</label>
+        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" checked data-aria-controls="conditional-how-contacted-checked-2">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked-2">
+        <label class="govuk-label" for="contact-phone">Phone number</label>
+        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
+        <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+      </div>
+      test after
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/component.json
new file mode 100644
index 000000000..de92056c4
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukDateInput"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..e5d08bd0c
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,20 @@
+{
+  "id" : "dob",
+  "namePrefix" : "dob",
+  "fieldset" : {
+    "legend" : {
+      "text" : "What is your date of birth?"
+    }
+  },
+  "hint" : {
+    "text" : "For example, 31 3 1980"
+  },
+  "formGroup" : {
+    "beforeInputs": { "html": "<p>test before</p>"},
+    "afterInputs": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..753ba0014
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,38 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
+    <legend class="govuk-fieldset__legend">
+      What is your date of birth?
+    </legend>
+    <div id="dob-hint" class="govuk-hint">
+      For example, 31 3 1980
+    </div>
+    <div class="govuk-date-input" id="dob">
+      <p>test before</p>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <p>test after</p>
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..de92056c4
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukDateInput"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..32db7bdea
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,20 @@
+{
+  "id" : "dob",
+  "namePrefix" : "dob",
+  "fieldset" : {
+    "legend" : {
+      "text" : "What is your date of birth?"
+    }
+  },
+  "hint" : {
+    "text" : "For example, 31 3 1980"
+  },
+  "formGroup" : {
+    "beforeInputs": { "text": "test before"},
+    "afterInputs": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..af8fafdad
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/date-input-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,38 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
+    <legend class="govuk-fieldset__legend">
+      What is your date of birth?
+    </legend>
+    <div id="dob-hint" class="govuk-hint">
+      For example, 31 3 1980
+    </div>
+    <div class="govuk-date-input" id="dob">
+      test before
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-day">
+            Day
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-month">
+            Month
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
+        </div>
+      </div>
+      <div class="govuk-date-input__item">
+        <div class="govuk-form-group">
+          <label class="govuk-label govuk-date-input__label" for="dob-year">
+            Year
+          </label>
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" inputmode="numeric">
+        </div>
+      </div>
+      test after
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/component.json
similarity index 100%
rename from play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/component.json
rename to play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/component.json
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..66aab26a8
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,15 @@
+{
+  "label" : {
+    "text" : "National Insurance number"
+  },
+  "id" : "input-example",
+  "name" : "test-name",
+  "formGroup" : {
+    "beforeInput": { "html": "<p>test before</p>"},
+    "afterInput": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..58f798d33
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,10 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="input-example">
+    National Insurance number
+  </label>
+  <div class="govuk-input__wrapper">
+    <p>test before</p>
+    <input class="govuk-input" id="input-example" name="test-name" type="text">
+    <p>test after</p>
+  </div>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..3a404020f
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukInput"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..85ce39a7b
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,15 @@
+{
+  "label" : {
+    "text" : "National Insurance number"
+  },
+  "id" : "input-example",
+  "name" : "test-name",
+  "formGroup" : {
+    "beforeInput": { "text": "test before"},
+    "afterInput": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  }
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..de63cc82d
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,10 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="input-example">
+    National Insurance number
+  </label>
+  <div class="govuk-input__wrapper">
+test before
+    <input class="govuk-input" id="input-example" name="test-name" type="text">
+test after
+  </div>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/component.json
new file mode 100644
index 000000000..3a404020f
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukInput"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/input.json
similarity index 76%
rename from play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/input.json
rename to play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/input.json
index b61e1c265..2888920f5 100644
--- a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/input.json
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/input.json
@@ -10,8 +10,9 @@
       "data-attribute" : "value"
     }
   },
-  "afterInput" : {
-    "text" : "some-text"
+  "formGroup" : {
+    "beforeInput": { "text": "test before"},
+    "afterInput": { "html": "<p>test after</p>"}
   },
   "prefix" : {
     "text" : "£"
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/output.txt
similarity index 93%
rename from play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/output.txt
rename to play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/output.txt
index e11e4d3f4..c5efd1d7d 100644
--- a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-afterInput-and-customised-input-wrapper/output.txt
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/input-with-beforeInput-and-afterInput-with-customised-input-wrapper/output.txt
@@ -3,8 +3,10 @@
     Cost per item, in pounds
   </label>
   <div class="govuk-input__wrapper app-input-wrapper--custom-modifier" data-attribute="value">
+test before
     <div class="govuk-input__prefix" aria-hidden="true">£</div>
     <input class="govuk-input" id="input-with-afterInput-and-customised-input-wrapper" name="cost" type="text">
     <div class="govuk-input__suffix" aria-hidden="true">per item</div>
+    <p>test after</p>
   </div>
 </div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/component.json
new file mode 100644
index 000000000..bb2f57f10
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukRadios"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..a32f81cec
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,37 @@
+{
+  "idPrefix" : "how-contacted-2",
+  "name" : "how-contacted-2",
+  "formGroup" : {
+    "beforeInputs": { "html": "<p>test before</p>"},
+    "afterInputs": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "fieldset" : {
+    "legend" : {
+      "text" : "How do you want to be contacted?"
+    }
+  },
+  "items" : [ {
+    "value" : "email",
+    "text" : "Email",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+    }
+  }, {
+    "value" : "phone",
+    "text" : "Phone",
+    "checked" : true,
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+    }
+  }, {
+    "value" : "text",
+    "text" : "Text message",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+    }
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..3e13017e9
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,42 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      How do you want to be contacted?
+    </legend>
+    <div class="govuk-radios" data-module="govuk-radios">
+      <p>test before</p>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2" name="how-contacted-2" type="radio" value="email" data-aria-controls="conditional-how-contacted-2">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2">
+          Email
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
+        <label class="govuk-label" for="context-email">Email address</label>
+        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2-2" name="how-contacted-2" type="radio" value="phone" checked data-aria-controls="conditional-how-contacted-2-2">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-radios__conditional" id="conditional-how-contacted-2-2">
+        <label class="govuk-label" for="contact-phone">Phone number</label>
+        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2-3" name="how-contacted-2" type="radio" value="text" data-aria-controls="conditional-how-contacted-2-3">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2-3">
+        <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+      </div>
+      <p>test after</p>
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..bb2f57f10
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukRadios"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..f1d5ad441
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,37 @@
+{
+  "idPrefix" : "how-contacted-2",
+  "name" : "how-contacted-2",
+  "formGroup" : {
+    "beforeInputs": { "text": "test before"},
+    "afterInputs": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "fieldset" : {
+    "legend" : {
+      "text" : "How do you want to be contacted?"
+    }
+  },
+  "items" : [ {
+    "value" : "email",
+    "text" : "Email",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+    }
+  }, {
+    "value" : "phone",
+    "text" : "Phone",
+    "checked" : true,
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+    }
+  }, {
+    "value" : "text",
+    "text" : "Text message",
+    "conditional" : {
+      "html" : "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+    }
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..638fcb985
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/radios-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,42 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      How do you want to be contacted?
+    </legend>
+    <div class="govuk-radios" data-module="govuk-radios">
+      test before
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2" name="how-contacted-2" type="radio" value="email" data-aria-controls="conditional-how-contacted-2">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2">
+          Email
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
+        <label class="govuk-label" for="context-email">Email address</label>
+        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2-2" name="how-contacted-2" type="radio" value="phone" checked data-aria-controls="conditional-how-contacted-2-2">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-radios__conditional" id="conditional-how-contacted-2-2">
+        <label class="govuk-label" for="contact-phone">Phone number</label>
+        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="how-contacted-2-3" name="how-contacted-2" type="radio" value="text" data-aria-controls="conditional-how-contacted-2-3">
+        <label class="govuk-label govuk-radios__label" for="how-contacted-2-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2-3">
+        <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+      </div>
+      test after
+    </div>
+  </fieldset>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/component.json
new file mode 100644
index 000000000..e3d17dee4
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukSelect"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/input.json
new file mode 100644
index 000000000..a723ea932
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/input.json
@@ -0,0 +1,28 @@
+{
+  "id" : "select-1",
+  "name" : "select-1",
+  "classes" : "govuk-!-width-full",
+  "label" : {
+    "text" : "Label text goes here"
+  },
+  "formGroup" : {
+    "beforeInput": { "html": "<p>test before</p>"},
+    "afterInput": { "html": "<p>test after</p>"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "items" : [ {
+    "value" : 1,
+    "text" : "GOV.UK frontend option 1"
+  }, {
+    "value" : 2,
+    "text" : "GOV.UK frontend option 2",
+    "selected" : true
+  }, {
+    "value" : 3,
+    "text" : "GOV.UK frontend option 3",
+    "disabled" : true
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/output.txt
new file mode 100644
index 000000000..22ab1445d
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-html/output.txt
@@ -0,0 +1,12 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="select-1">
+    Label text goes here
+  </label>
+  <p>test before</p>
+  <select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
+    <option value="1">GOV.UK frontend option 1</option>
+    <option value="2" selected>GOV.UK frontend option 2</option>
+    <option value="3" disabled>GOV.UK frontend option 3</option>
+  </select>
+  <p>test after</p>
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/component.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/component.json
new file mode 100644
index 000000000..e3d17dee4
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/component.json
@@ -0,0 +1,3 @@
+{
+  "name" : "govukSelect"
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/input.json b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/input.json
new file mode 100644
index 000000000..e2afe8926
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/input.json
@@ -0,0 +1,28 @@
+{
+  "id" : "select-1",
+  "name" : "select-1",
+  "classes" : "govuk-!-width-full",
+  "label" : {
+    "text" : "Label text goes here"
+  },
+  "formGroup" : {
+    "beforeInput": { "text": "test before"},
+    "afterInput": { "text": "test after"},
+    "attributes" : {
+      "some-data-attribute": "true",
+      "some-other-data-attribute": "eleven"
+    }
+  },
+  "items" : [ {
+    "value" : 1,
+    "text" : "GOV.UK frontend option 1"
+  }, {
+    "value" : 2,
+    "text" : "GOV.UK frontend option 2",
+    "selected" : true
+  }, {
+    "value" : 3,
+    "text" : "GOV.UK frontend option 3",
+    "disabled" : true
+  } ]
+}
\ No newline at end of file
diff --git a/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/output.txt b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/output.txt
new file mode 100644
index 000000000..24f454f5c
--- /dev/null
+++ b/play-frontend-hmrc-play-30/src/test/resources/fixtures/govuk-frontend/additional-fixtures/select-with-beforeInput-and-afterInput-text/output.txt
@@ -0,0 +1,12 @@
+<div class="govuk-form-group" some-data-attribute="true" some-other-data-attribute="eleven">
+  <label class="govuk-label" for="select-1">
+    Label text goes here
+  </label>
+  test before
+  <select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
+    <option value="1">GOV.UK frontend option 1</option>
+    <option value="2" selected>GOV.UK frontend option 2</option>
+    <option value="3" disabled>GOV.UK frontend option 3</option>
+  </select>
+  test after
+</div>
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/Generators.scala
index 52e06c1f9..9b185788c 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/Generators.scala
@@ -24,25 +24,16 @@ import uk.gov.hmrc.govukfrontend.views.viewmodels.input.InputWrapper
 
 object Generators {
 
-  // TODO remove once all inputs implement formGroup.beforeInput / formGroup.afterInput
-  val arbFormGroupWithoutBeforeOrAfterInput: Arbitrary[FormGroup] = Arbitrary {
-    for {
-      classes    <- Gen.option(genClasses())
-      attributes <- genAttributes()
-    } yield FormGroup(
-      classes = classes,
-      attributes = attributes
-    )
-  }
-
   val arbFormGroup: Arbitrary[FormGroup] = Arbitrary {
     for {
-      classes    <- Gen.option(genClasses())
-      attributes <- genAttributes()
-      afterInput <- Gen.option(arbContent.arbitrary)
+      classes     <- Gen.option(genClasses())
+      attributes  <- genAttributes()
+      beforeInput <- Gen.option(arbContent.arbitrary)
+      afterInput  <- Gen.option(arbContent.arbitrary)
     } yield FormGroup(
       classes = classes,
       attributes = attributes,
+      beforeInput = beforeInput,
       afterInput = afterInput
     )
   }
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Generators.scala
index a7cc9f546..2cab06157 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/checkboxes/Generators.scala
@@ -63,7 +63,7 @@ object Generators {
       fieldsetParams     <- Gen.option(arbFieldset.arbitrary)
       hintParams         <- Gen.option(arbHint.arbitrary)
       errorMessageParams <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup          <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup          <- arbFormGroup.arbitrary
       idPrefix           <- Gen.option(genAlphaStr())
       name               <- genNonEmptyAlphaStr
       nItems             <- Gen.chooseNum(0, 5)
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/Generators.scala
index 3ea0378dc..ca1e80f8d 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/dateinput/Generators.scala
@@ -54,7 +54,7 @@ object Generators {
       items        <- Gen.listOfN(n, arbInputItem.arbitrary)
       hint         <- Gen.option(arbHint.arbitrary)
       errorMessage <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup    <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup    <- arbFormGroup.arbitrary
       fieldset     <- Gen.option(arbFieldset.arbitrary)
       classes      <- genClasses()
       attributes   <- genAttributes()
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/fileupload/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/fileupload/Generators.scala
index 85e53959c..7d208d679 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/fileupload/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/fileupload/Generators.scala
@@ -33,7 +33,7 @@ object Generators {
       label        <- arbLabel.arbitrary
       hint         <- Gen.option(arbHint.arbitrary)
       errorMessage <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup    <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup    <- arbFormGroup.arbitrary
       classes      <- genClasses()
       attributes   <- genAttributes()
     } yield FileUpload(
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/input/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/input/Generators.scala
index 8f5b8248d..518d03348 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/input/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/input/Generators.scala
@@ -36,7 +36,7 @@ object Generators {
       label          <- arbLabel.arbitrary
       hint           <- Gen.option(arbHint.arbitrary)
       errorMessage   <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup      <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup      <- arbFormGroup.arbitrary
       classes        <- genClasses()
       autocomplete   <- Gen.option(genAlphaStr())
       pattern        <- Gen.option(genAlphaStr())
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Generators.scala
index da858010b..108f7e0dc 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/radios/Generators.scala
@@ -57,7 +57,7 @@ object Generators {
       fieldset     <- Gen.option(arbFieldset.arbitrary)
       hint         <- Gen.option(arbHint.arbitrary)
       errorMessage <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup    <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup    <- arbFormGroup.arbitrary
       idPrefix     <- Gen.option(genAlphaStr())
       name         <- genAlphaStr()
       n            <- Gen.chooseNum(0, 5)
diff --git a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/select/Generators.scala b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/select/Generators.scala
index 3a78c1ff2..e9308fa96 100644
--- a/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/select/Generators.scala
+++ b/play-frontend-hmrc-play-30/src/test/scala/uk/gov/hmrc/govukfrontend/views/viewmodels/select/Generators.scala
@@ -44,7 +44,7 @@ object Generators {
       label        <- arbLabel.arbitrary
       hint         <- Gen.option(arbHint.arbitrary)
       errorMessage <- Gen.option(arbErrorMessage.arbitrary)
-      formGroup    <- arbFormGroupWithoutBeforeOrAfterInput.arbitrary
+      formGroup    <- arbFormGroup.arbitrary
       classes      <- genClasses()
       attributes   <- genAttributes()
     } yield Select(