diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index cd52c86c4..41819c85a 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -94,3 +94,106 @@
     box-shadow: 0 2px 0 $govuk-focus-text-colour;
   }
 }
+
+// Updates to form inputs
+.govuk-input {
+  &:focus {
+    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
+    // components such as textarea where we avoid changing `border-width` as
+    // it will change the element size. Also, `outline` cannot be utilised
+    // here as it is already used for the yellow focus state.
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+  }
+}
+.govuk-input--error {
+  &:focus {
+    border-color: $govuk-input-border-colour;
+    // Remove `box-shadow` inherited from `:focus` as `input--error`
+    // already has the thicker border.
+    box-shadow: none;
+  }
+}
+
+// Updates to form textareas (hacked to work with GOVUK Elements version)
+.form-control {
+  @include govuk-focusable;
+
+  &:focus {
+    // Double the border by adding its width again. Use `box-shadow` to do
+    // this instead of changing `border-width` (which changes element size) and
+    // since `outline` is already used for the yellow focus state.
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+  }
+}
+.form-control-error {
+  &:focus {
+    border-color: $govuk-input-border-colour;
+    // Remove `box-shadow` inherited from `:focus` as `input--error`
+    // already has the thicker border.
+    box-shadow: none;
+  }
+}
+
+// Updates to form radios (hacked to work with GOVUK Elements version)
+
+$govuk-radios-size: 40px;
+// When the default focus width is used on a curved edge it looks visually smaller.
+// So for the circular radios we bump the default to make it look visually consistent.
+$govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+// ( ) Radio ring
+.multiple-choice [type=radio] + label::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: $govuk-radios-size;
+  height: $govuk-radios-size;
+
+  border: $govuk-border-width-form-element solid currentColor;
+  border-radius: 50%;
+  background: transparent;
+}
+
+//  •  Radio button
+//
+// We create the 'button' entirely out of 'border' so that they remain
+// 'filled' even when colours are overridden in the browser.
+.multiple-choice [type=radio] + label::after {
+  content: "";
+
+  position: absolute;
+  top: govuk-spacing(2);
+  left: govuk-spacing(2);
+
+  width: 0;
+  height: 0;
+
+  border: govuk-spacing(2) solid currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  background: currentColor;
+}
+
+// Focused state
+.multiple-choice [type=radio]:focus + label::before {
+  border-width: 4px;
+  // Since box-shadows are removed when users customise their colours we set a
+  // transparent outline that is shown instead.
+  // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+  outline: $govuk-focus-width solid transparent;
+  outline-offset: $govuk-focus-width;
+  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+}
+
+// Selected state
+.multiple-choice [type=radio]:checked + label::after {
+  opacity: 1;
+}
+
+// Updates to form checkboxes
+.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+  border-width: 4px;
+}