diff --git a/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs
index 214af9e..60a3ccb 100644
--- a/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs
+++ b/NHSUKViewComponents.Web/ViewComponents/NumericInputViewComponent.cs
@@ -13,7 +13,9 @@ public IViewComponentResult Invoke(
             string type,
             string hintText,
             string cssClass,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default,
+            string? regularExClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -33,7 +35,9 @@ bool required
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage,
+                string.IsNullOrEmpty(regularExClientSideErrorMessage) ? null : regularExClientSideErrorMessage                
             );
             return View(numericInputViewModel);
         }
diff --git a/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs
index 8e079da..d47533b 100644
--- a/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs
+++ b/NHSUKViewComponents.Web/ViewComponents/RadioListViewComponent.cs
@@ -14,7 +14,8 @@ public IViewComponentResult Invoke(
             IEnumerable<RadiosItemViewModel> radios,
             bool populateWithCurrentValues,
             string hintText,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var radiosList = radios.Select(
@@ -31,7 +32,8 @@ bool required
                 label,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 radiosList,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
 
             return View(viewModel);
@@ -42,7 +44,8 @@ private bool IsSelectedRadio(string aspFor, RadiosItemViewModel radioItem, bool
             var model = ViewData.Model;
             var property = model.GetType().GetProperty(aspFor);
             var value = property?.GetValue(model);
-            return populateWithCurrentValue && value.Equals(radioItem.Value);
+
+            return populateWithCurrentValue && value != null && value.Equals(radioItem.Value);
         }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs
index 75b5392..5f202a0 100644
--- a/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs
+++ b/NHSUKViewComponents.Web/ViewComponents/SelectListViewComponent.cs
@@ -15,7 +15,8 @@ public IViewComponentResult Invoke(
             IEnumerable<SelectListItem> selectListOptions,
             string? hintText,
             string? cssClass,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -36,7 +37,8 @@ bool required
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 errorMessage,
                 hasError,
-                required
+                required,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
             return View(selectListViewModel);
         }
diff --git a/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs
index 2fa6071..2ff86ba 100644
--- a/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs
+++ b/NHSUKViewComponents.Web/ViewComponents/TextAreaViewComponent.cs
@@ -17,6 +17,7 @@ public class TextAreaViewComponent : ViewComponent
         /// <param name="hintText">Leave blank for no hint.</param>
         /// <param name="cssClass"></param>
         /// <param name="characterCount"></param>
+        /// <param name="maxLengthClientSideErrorMessage"></param>
         /// <returns></returns>
         public IViewComponentResult Invoke(
             string aspFor,
@@ -26,7 +27,9 @@ public IViewComponentResult Invoke(
             bool spellCheck,
             string hintText,
             string cssClass,
-            int? characterCount)
+            int? characterCount,
+            string? maxLengthClientSideErrorMessage = default
+            )
         {
             var model = ViewData.Model;
 
@@ -42,7 +45,9 @@ public IViewComponentResult Invoke(
                 errorMessages,
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
-                characterCount);
+                characterCount,
+                maxLengthClientSideErrorMessage
+                );
             return View(textBoxViewModel);
         }
     }
diff --git a/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs b/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs
index 5fb7d1b..8d42b32 100644
--- a/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs
+++ b/NHSUKViewComponents.Web/ViewComponents/TextInputViewComponent.cs
@@ -19,6 +19,7 @@ public class TextInputViewComponent : ViewComponent
         /// <param name="cssClass"></param>
         /// <param name="required"></param>
         /// <param name="placeholderText"></param>
+        /// <param name="requiredClientErrorMessage"></param>
         /// <returns></returns>
         public IViewComponentResult Invoke(
             string aspFor,
@@ -29,8 +30,9 @@ public IViewComponentResult Invoke(
             string hintText,
             string autocomplete,
             string cssClass,
-            bool required,
-            string? placeholderText = null
+            bool required,            
+            string? placeholderText = null,
+            string? requiredClientSideErrorMessage = default
         )
         {
             var model = ViewData.Model;
@@ -53,7 +55,8 @@ public IViewComponentResult Invoke(
                 string.IsNullOrEmpty(cssClass) ? null : cssClass,
                 string.IsNullOrEmpty(hintText) ? null : hintText,
                 required,
-                string.IsNullOrEmpty(placeholderText) ? null : placeholderText
+                string.IsNullOrEmpty(placeholderText) ? null : placeholderText,
+                string.IsNullOrEmpty(requiredClientSideErrorMessage) ? null : requiredClientSideErrorMessage
             );
             return View(textBoxViewModel);
         }
diff --git a/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs b/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs
index 45fed8a..aef6023 100644
--- a/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs
+++ b/NHSUKViewComponents.Web/ViewModels/NumericInputViewModel.cs
@@ -16,7 +16,9 @@ public NumericInputViewModel(
             IEnumerable<string> errorMessages,
             string? cssClass = null,
             string? hintText = null,
-            bool required = false
+            bool required = false,
+            string? requiredClientSideErrorMessage = default,
+            string? regularExClientSideErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -31,6 +33,8 @@ public NumericInputViewModel(
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientSideErrorMessage;
+            RegularExClientSideErrorMessage = regularExClientSideErrorMessage;
         }
 
         public string Id { get; set; }
@@ -42,5 +46,7 @@ public NumericInputViewModel(
         public string? HintText { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
         public bool Required { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
+        public string? RegularExClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs b/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs
index ffc6e20..4b73ca1 100644
--- a/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs
+++ b/NHSUKViewComponents.Web/ViewModels/RadiosViewModel.cs
@@ -9,7 +9,8 @@ public RadiosViewModel(
             string label,
             string hintText,
             IEnumerable<RadiosItemViewModel> radios,
-            bool required
+            bool required,
+            string? requiredClientSideErrorMessage = default
         )
         {
             AspFor = aspFor;
@@ -17,6 +18,7 @@ bool required
             HintText = hintText;
             Radios = radios;
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientSideErrorMessage;
         }
 
         public string AspFor { get; set; }
@@ -27,5 +29,6 @@ bool required
 
         public IEnumerable<RadiosItemViewModel> Radios { get; set; }
         public bool Required { get; set; }
+        public string RequiredClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs b/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs
index 8d5d11d..2e98942 100644
--- a/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs
+++ b/NHSUKViewComponents.Web/ViewModels/SelectListViewModel.cs
@@ -17,7 +17,8 @@ public SelectListViewModel
             string? hintText = null,
             string? errorMessage = null,
             bool hasError = false,
-            bool required = false
+            bool required = false,
+            string? requiredClientErrorMessage = default
         )
         {
             Id = id;
@@ -31,6 +32,7 @@ public SelectListViewModel
             ErrorMessage = errorMessage;
             HasError = hasError;
             Required = required;
+            RequiredClientSideErrorMessage = requiredClientErrorMessage;
         }
 
         public string Id { get; set; }
@@ -44,5 +46,6 @@ public SelectListViewModel
         public string? ErrorMessage { get; set; }
         public bool HasError { get; set; }
         public bool Required { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs b/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs
index 9447356..fc4d974 100644
--- a/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs
+++ b/NHSUKViewComponents.Web/ViewModels/TextAreaViewModel.cs
@@ -16,7 +16,8 @@ public TextAreaViewModel
             IEnumerable<string> errorMessages,
             string? cssClass = null,
             string? hintText = null,
-            int? characterCount = null
+            int? characterCount = null,
+            string? maxLengthClientSideErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -32,6 +33,7 @@ public TextAreaViewModel
             CharacterCount = characterCount;
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
+            MaxLengthClientSideErrorMessage = maxLengthClientSideErrorMessage;
         }
 
         public string Id { get; set; }
@@ -45,5 +47,6 @@ public TextAreaViewModel
         public int? CharacterCount { get; set; }
         public IEnumerable<string> ErrorMessages { get; set; }
         public bool HasError { get; set; }
+        public string MaxLengthClientSideErrorMessage { get; set; }
     }
 }
diff --git a/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs b/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs
index cc7b534..b1972ad 100644
--- a/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs
+++ b/NHSUKViewComponents.Web/ViewModels/TextInputViewModel.cs
@@ -17,7 +17,8 @@ public TextInputViewModel(
             string? cssClass = null,
             string? hintText = null,
             bool required = false,
-            string? placeholder = null
+            string? placeholder = null,
+            string? requiredSideClientErrorMessage = default
         )
         {
             var errorMessageList = errorMessages.ToList();
@@ -35,6 +36,7 @@ public TextInputViewModel(
             ErrorMessages = errorMessageList;
             HasError = errorMessageList.Any();
             PlaceHolder = placeholder;
+            RequiredClientSideErrorMessage = requiredSideClientErrorMessage;
         }
 
         public string Id { get; set; }
@@ -50,6 +52,7 @@ public TextInputViewModel(
         public IEnumerable<string> ErrorMessages { get; set; }
         public readonly bool HasError;
         public string? PlaceHolder { get; set; }
+        public string? RequiredClientSideErrorMessage { get; set; }
     }
 
 }
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml
index abb6ae0..b06e574 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/ErrorSummary/Default.cshtml
@@ -1,18 +1,33 @@
 @using NHSUKViewComponents.Web.ViewModels
 @model ErrorSummaryViewModel
 
-<div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
-  <h2 class="nhsuk-error-summary__title" id="error-summary-title">
-    There is a problem
-  </h2>
-  <div class="nhsuk-error-summary__body">
-    <ul class="nhsuk-list nhsuk-error-summary__list">
-      @foreach (var item in Model.Errors)
-      {
-        <li>
-          <a href="#@item.Key">@item.ErrorMessage</a>
-        </li>
-      }
-    </ul>
-  </div>
-</div>
+@if(Model.Errors.Any())
+{
+    <div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+      <h2 class="nhsuk-error-summary__title" id="error-summary-title">
+        There is a problem
+      </h2>
+      <div class="nhsuk-error-summary__body">
+        <ul class="nhsuk-list nhsuk-error-summary__list">
+          @foreach (var item in Model.Errors)
+          {
+            <li>
+              <a href="#@item.Key">@item.ErrorMessage</a>
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+}
+else
+{
+    <div class="nhsuk-error-summary validation-summary-errors validation-summary-valid" data-valmsg-summary="true" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+        <h2 class="nhsuk-error-summary__title" id="error-summary-title">
+            There is a problem
+        </h2>
+        <div class="nhsuk-error-summary__body">
+            <ul class="nhsuk-list nhsuk-error-summary__list">
+            </ul>
+        </div>
+    </div>
+}
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml
index 3102ad3..d9c7385 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/NumericInput/Default.cshtml
@@ -2,34 +2,45 @@
 @using NHSUKViewComponents.Web.Helpers
 @model NumericInputViewModel
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
-  <label class="nhsuk-label" for="@Model.Id">
-    @Model.Label
-  </label>
-  @if (Model.HintText != null)
-  {
-    <div class="nhsuk-hint" id="@Model.Name-hint">
-      @Html.Raw(Model.HintText)
-    </div>
-  }
-  @if (Model.HasError)
-  {
-    <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
-      @foreach (var errorMessage in Model.ErrorMessages)
-      {
-        <span class="error-message--margin-bottom-1 nhsuk-error-message">
-          <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
-        </span>
-      }
-    </div>
-  }
-  <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
-         id="@Model.Id"
-         name="@Model.Name"
-         value="@Model.Value"
-         type="@Model.Type"
-         pattern="[0-9]*"
-         inputmode="numeric"
-         aria-invalid="@(Model.HasError ? "true" : null)"
-         aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
-         aria-required="@(Model.Required ? "true" : "false" )" />
+    <label class="nhsuk-label" for="@Model.Id">
+        @Model.Label
+    </label>
+    @if (Model.HintText != null)
+    {
+        <div class="nhsuk-hint" id="@Model.Name-hint">
+            @Html.Raw(Model.HintText)
+        </div>
+    }
+    @if (Model.HasError)
+    {
+        <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+            @foreach (var errorMessage in Model.ErrorMessages)
+            {
+                <span class="error-message--margin-bottom-1 nhsuk-error-message">
+                    <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
+                </span>
+            }
+        </div>
+    }
+
+    if(!Model.HasError)
+    {
+        <div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+        </div>
+    }
+
+    <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
+           id="@Model.Id"
+           name="@Model.Name"
+           value="@Model.Value"
+           type="@Model.Type"
+           pattern="[0-9]*"
+           inputmode="numeric"
+           aria-invalid="@(Model.HasError ? "true" : null)"
+           aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
+           aria-required="@(Model.Required ? "true" : "false" )"
+           data-val-regex-pattern="[0-9]*"
+           data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
+           data-val-regex="@Model.RegularExClientSideErrorMessage"
+           data-val="@(Model.Required ? "true" : "false" )" />
 </div>
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
index 5ede878..8870800 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/RadioList/Default.cshtml
@@ -17,6 +17,12 @@
       <div class="nhsuk-hint" id="@Model.Label.RemoveWhitespace()-hint">
         @Html.Raw(Model.HintText)
       </div>
+    }   
+
+    @if (Model.Required)
+    {
+        <div data-valmsg-for="@Model.AspFor" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+        </div>
     }
 
     <div class="nhsuk-radios" aria-required="@(Model.Required ? "true" : "false" )">
@@ -30,6 +36,8 @@
                type="radio"
                value="@radio.Value"
                aria-describedby="@radio.Value-item-hint"
+               data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
+               data-val="@(Model.Required ? "true" : "false" )"
                @(radio.Selected ? "checked" : string.Empty) />
           <label class="nhsuk-label nhsuk-radios__label" for="@radioId">
             @radio.Label
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/SelectList/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/SelectList/Default.cshtml
index ba3d3f6..7621c57 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/SelectList/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/SelectList/Default.cshtml
@@ -3,32 +3,39 @@
 @model SelectListViewModel
 
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
-  <label class="nhsuk-label" for="@Model.Id">
-    @Model.Label
-  </label>
-  @if (Model.HintText != null)
-  {
-    <div class="nhsuk-hint" id="@Model.Name-hint">
-      @Html.Raw(Model.HintText)
-    </div>
-  }
-  @if (Model.HasError)
-  {
-    <span class="nhsuk-error-message" id="@Model.Name-error">
-      <span class="nhsuk-u-visually-hidden">Error:</span> @Model.ErrorMessage
-    </span>
-  }
-  <select class="nhsuk-select @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
-          id="@Model.Id"
-          name="@Model.Name"
-          value="@(Model.Value != null ? Model.Value : null)"
-          asp-items="Model.SelectListOptions"
-          aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
-          aria-invalid="@(Model.HasError ? "true" : null)"
-          aria-required="@(Model.Required ? "true" : "false" )">
-    @if (Model.DefaultOption != null)
+    <label class="nhsuk-label" for="@Model.Id">
+        @Model.Label
+    </label>
+    @if (Model.HintText != null)
     {
-      <option value="" disabled="@(Model.Required)" selected=@(Model.Value != null ? "" : "selected")>@Model.DefaultOption</option>
+        <div class="nhsuk-hint" id="@Model.Name-hint">
+            @Html.Raw(Model.HintText)
+        </div>
     }
-  </select>
+    @if (Model.HasError)
+    {
+        <span class="nhsuk-error-message" id="@Model.Name-error">
+            <span class="nhsuk-u-visually-hidden">Error:</span> @Model.ErrorMessage
+        </span>
+    }
+    @if (Model.Required && !Model.HasError)
+    {
+        <div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">            
+        </div>
+    }
+    <select class="nhsuk-select @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
+            id="@Model.Id"
+            name="@Model.Name"
+            value="@(Model.Value != null ? Model.Value : null)"
+            asp-items="Model.SelectListOptions"
+            aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
+            aria-invalid="@(Model.HasError ? "true" : null)"
+            aria-required="@(Model.Required ? "true" : "false" )"
+            data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
+            data-val="@(Model.Required ? "true" : "false" )">
+        @if (Model.DefaultOption != null)
+        {
+            <option value="" disabled="@(Model.Required)" selected=@(Model.Value != null ? "" : "selected")>@Model.DefaultOption</option>
+        }
+    </select>
 </div>
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/TextArea/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/TextArea/Default.cshtml
index 33b7be9..c06c3aa 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/TextArea/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/TextArea/Default.cshtml
@@ -2,46 +2,56 @@
 @using NHSUKViewComponents.Web.Helpers
 @model TextAreaViewModel
 @{
-  string? describedBy = ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText);
-  @if (Model.CharacterCount.HasValue)
-  {
-    describedBy = describedBy == null ? "" : describedBy += " ";
-    describedBy += @Model.Name + "-info";
-  }
+    string? describedBy = ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText);
+    @if (Model.CharacterCount.HasValue)
+    {
+        describedBy = describedBy == null ? "" : describedBy += " ";
+        describedBy += @Model.Name + "-info";
+    }
 }
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")">
-  <label class="nhsuk-label" for="@Model.Id">
-    @Model.Label
-  </label>
-  @if (Model.HintText != null)
-  {
-    <div class="nhsuk-hint" id="@Model.Name-hint">
-      @Html.Raw(Model.HintText)
-    </div>
-  }
-  @if (Model.HasError)
-  {
-    <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
-      @foreach (var errorMessage in Model.ErrorMessages)
-      {
-        <span class="error-message--margin-bottom-1 nhsuk-error-message">
-          <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
-        </span>
-      }
-    </div>
-  }
-  <textarea class="nhsuk-textarea @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
-            id="@Model.Id"
-            name="@Model.Name"
-            value="@Model.Value"
-            rows="@Model.Rows"
-            spellcheck="@Model.SpellCheck"
-            aria-invalid="@(Model.HasError ? "true" : null)"
-            aria-describedby="@describedBy">@Model.Value</textarea>
-  @if (Model.CharacterCount.HasValue)
-  {
-    <div id="@Model.Name-info" class="nhsuk-hint">
-      You can enter up to @Model.CharacterCount characters
-    </div>
-  }
+    <label class="nhsuk-label" for="@Model.Id">
+        @Model.Label
+    </label>
+    @if (Model.HintText != null)
+    {
+        <div class="nhsuk-hint" id="@Model.Name-hint">
+            @Html.Raw(Model.HintText)
+        </div>
+    }
+    @if (Model.HasError)
+    {
+        <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+            @foreach (var errorMessage in Model.ErrorMessages)
+            {
+                <span class="error-message--margin-bottom-1 nhsuk-error-message">
+                    <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
+                </span>
+            }
+        </div>
+    }
+    @if (Model.CharacterCount.HasValue && !Model.HasError)        
+    {
+        <div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">           
+        </div>
+    }
+
+    <textarea class="nhsuk-textarea @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
+              id="@Model.Id"
+              name="@Model.Name"
+              value="@Model.Value"
+              rows="@Model.Rows"
+              spellcheck="@Model.SpellCheck"
+              aria-invalid="@(Model.HasError ? "true" : null)"
+              aria-describedby="@describedBy"
+              data-val="@(Model.CharacterCount.HasValue ? "true" : "false" )"
+              data-val-maxlength-max="@(Model.CharacterCount.HasValue ? @Model.CharacterCount : "" )"
+              data-val-maxlength="@(Model.CharacterCount.HasValue ? Model.MaxLengthClientSideErrorMessage : "")">@Model.Value</textarea>
+    @if (Model.CharacterCount.HasValue)
+    {
+        <div id="@Model.Name-info" class="nhsuk-hint">
+            You can enter up to @Model.CharacterCount characters
+        </div>
+    }
 </div>
+
diff --git a/NHSUKViewComponents.Web/Views/Shared/Components/TextInput/Default.cshtml b/NHSUKViewComponents.Web/Views/Shared/Components/TextInput/Default.cshtml
index 8b99e16..08b866f 100644
--- a/NHSUKViewComponents.Web/Views/Shared/Components/TextInput/Default.cshtml
+++ b/NHSUKViewComponents.Web/Views/Shared/Components/TextInput/Default.cshtml
@@ -2,34 +2,42 @@
 @using NHSUKViewComponents.Web.Helpers
 @model TextInputViewModel
 <div class="nhsuk-form-group @(Model.HasError ? "nhsuk-form-group--error" : "")" style="white-space:nowrap">
-  <label class="nhsuk-label" for="@Model.Name">
-    @Model.Label
-  </label>
-  @if (Model.HintText != null)
-  {
-    <div class="nhsuk-hint" id="@Model.Name-hint">
-      @Html.Raw(Model.HintText)
-    </div>
-  }
-  @if (Model.HasError)
-  {
-    <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
-      @foreach (var errorMessage in Model.ErrorMessages)
-      {
-        <span class="error-message--margin-bottom-1 nhsuk-error-message">
-          <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
-        </span>
-      }
-    </div>
-  }
-  <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
-         id="@Model.Id"
-         name="@Model.Name"
-         value="@Model.Value"
-         type="@Model.Type"
-         spellcheck="@Model.SpellCheck"
-         autocomplete="@Model.Autocomplete"
-         aria-invalid="@(Model.HasError ? "true" : null )"
-         aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
-         aria-required="@(Model.Required ? "true" : "false" )" />
+    <label class="nhsuk-label" for="@Model.Name">
+        @Model.Label
+    </label>
+    @if (Model.HintText != null)
+    {
+        <div class="nhsuk-hint" id="@Model.Name-hint">
+            @Html.Raw(Model.HintText)
+        </div>
+    }
+    @if (Model.HasError)
+    {
+        <div id="@Model.Name-error" class="nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">
+            @foreach (var errorMessage in Model.ErrorMessages)
+            {
+                <span class="error-message--margin-bottom-1 nhsuk-error-message">
+                    <span class="nhsuk-u-visually-hidden">Error:</span> @errorMessage
+                </span>
+            }
+        </div>
+    }
+    @if (Model.Required && !Model.HasError)
+    {
+        <div data-valmsg-for="@Model.Name" data-valmsg-replace="true" class="nhsuk-error-message nhsuk-u-padding-top-1 nhsuk-u-padding-bottom-3">           
+        </div>
+    }
+
+    <input class="nhsuk-input @Model.Class @(Model.HasError ? "nhsuk-input--error" : "")"
+           id="@Model.Id"
+           name="@Model.Name"
+           value="@Model.Value"
+           type="@Model.Type"
+           spellcheck="@Model.SpellCheck"
+           autocomplete="@Model.Autocomplete"
+           aria-invalid="@(Model.HasError ? "true" : null )"
+           aria-describedby="@ViewComponentDynamicAttributeHelper.GetAriaDescribedByAttribute(Model.Name, Model.HasError, Model.HintText)"
+           aria-required="@(Model.Required ? "true" : "false" )"
+           data-val-required="@(Model.Required ? Model.RequiredClientSideErrorMessage : "" )"
+           data-val="@(Model.Required ? "true" : "false" )" />
 </div>