diff --git a/CHANGELOG.md b/CHANGELOG.md
index 720c769a7d..9261022e3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -79,6 +79,14 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads](https://github.com/alphagov/govuk-frontend/pull/1942)
 - [#1947 Add print styles for the panel component](https://github.com/alphagov/govuk-frontend/pull/1947)
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
+- [#1942: Set aria-expanded and aria-hidden attributes on header menu button and menu when page loads](https://github.com/alphagov/govuk-frontend/pull/1942)
+- [#1947 Add print styles for the panel component](https://github.com/alphagov/govuk-frontend/pull/1947)
+
 ## 3.8.1 (Fix release)
 
 ### Fixes
diff --git a/src/govuk/components/header/header.js b/src/govuk/components/header/header.js
index 85caddb7d9..84eb54f8d3 100644
--- a/src/govuk/components/header/header.js
+++ b/src/govuk/components/header/header.js
@@ -1,57 +1,53 @@
+import '../../vendor/polyfills/Event'
+import '../../vendor/polyfills/Element/prototype/classList'
 import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
 
 function Header ($module) {
   this.$module = $module
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle')
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  )
 }
 
+/**
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
 Header.prototype.init = function () {
-  // Check for module
-  var $module = this.$module
-  if (!$module) {
-    return
-  }
-
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle')
-  if (!$toggleButton) {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
     return
   }
 
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this))
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'))
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this))
 }
 
 /**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '')
-  } else {
-    node.className += ' ' + className
-  }
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible)
+  this.$menuButton.setAttribute('aria-expanded', isVisible)
+  this.$menu.setAttribute('aria-hidden', !isVisible)
 }
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module
-  var $toggleButton = event.target || event.srcElement
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'))
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open')
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open')
-
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true')
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false')
-  }
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open')
+  this.syncState(isVisible)
 }
 
 export default Header
diff --git a/src/govuk/components/header/header.test.js b/src/govuk/components/header/header.test.js
index c99dc58f34..a8a7544c4e 100644
--- a/src/govuk/components/header/header.test.js
+++ b/src/govuk/components/header/header.test.js
@@ -7,108 +7,146 @@ const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-beforeAll(async (done) => {
-  await page.emulate(iPhone)
-  done()
-})
+describe('Header navigation', () => {
+  beforeAll(async (done) => {
+    await page.emulate(iPhone)
+    done()
+  })
 
-describe('/components/header', () => {
-  describe('/components/header/with-navigation/preview', () => {
-    describe('when JavaScript is unavailable or fails', () => {
-      beforeAll(async () => {
-        await page.setJavaScriptEnabled(false)
+  describe('when JavaScript is unavailable or fails', () => {
+    beforeAll(async () => {
+      await page.setJavaScriptEnabled(false)
+      await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+        waitUntil: 'load'
       })
+    })
 
-      afterAll(async () => {
-        await page.setJavaScriptEnabled(true)
+    afterAll(async () => {
+      await page.setJavaScriptEnabled(true)
+    })
+
+    it('shows the navigation', async () => {
+      await expect(page).toMatchElement('.govuk-header__navigation', {
+        visible: true,
+        timeout: 1000
       })
+    })
+  })
 
-      it('falls back to making the navigation visible', async () => {
-        await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
-        const isContentVisible = await page.waitForSelector('.govuk-header__navigation', { visible: true, timeout: 1000 })
-        expect(isContentVisible).toBeTruthy()
+  describe('when JavaScript is available', () => {
+    describe('when no navigation is present', () => {
+      it('exits gracefully with no errors', async () => {
+        // Errors logged to the console will cause this test to fail
+        await page.goto(`${baseUrl}/components/header/preview`, {
+          waitUntil: 'load'
+        })
       })
     })
 
-    describe('when JavaScript is available', () => {
-      describe('when menu button is pressed', () => {
-        it('should indicate the open state of the toggle button', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+    describe('on page load', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
+        })
+      })
 
-          await page.click('.govuk-js-header-toggle')
+      it('exposes the hidden state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-          const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
-          expect(toggleButtonIsOpen).toBeTruthy()
-        })
+        expect(ariaHidden).toBe('true')
+      })
 
-        it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('exposes the collapsed state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          await page.click('.govuk-js-header-toggle')
+        expect(ariaExpanded).toBe('false')
+      })
+    })
 
-          const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
-          expect(toggleButtonAriaExpanded).toBe('true')
+    describe('when menu button is pressed', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
         })
+        await page.click('.govuk-js-header-toggle')
+      })
 
-        it('should indicate the open state of the navigation', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('adds the --open modifier class to the menu, making it visible', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__navigation',
+          el => el.classList.contains('govuk-header__navigation--open')
+        )
 
-          await page.click('.govuk-js-header-toggle')
+        expect(hasOpenClass).toBeTruthy()
+      })
 
-          const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
-          expect(navigationIsOpen).toBeTruthy()
-        })
+      it('adds the --open modifier class to the menu button', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__menu-button',
+          el => el.classList.contains('govuk-header__menu-button--open')
+        )
 
-        it('should indicate the visible state of the navigation using aria-hidden', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+        expect(hasOpenClass).toBeTruthy()
+      })
 
-          await page.click('.govuk-js-header-toggle')
+      it('exposes the visible state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-          const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
-          expect(navigationAriaHidden).toBe('false')
-        })
+        expect(ariaHidden).toBe('false')
       })
 
-      describe('when menu button is pressed twice', () => {
-        it('should indicate the open state of the toggle button', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('exposes the expanded state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+        expect(ariaExpanded).toBe('true')
+      })
+    })
 
-          const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open'))
-          expect(toggleButtonIsOpen).toBeFalsy()
+    describe('when menu button is pressed twice', () => {
+      beforeAll(async () => {
+        await page.goto(`${baseUrl}/components/header/with-navigation/preview`, {
+          waitUntil: 'load'
         })
+        await page.click('.govuk-js-header-toggle')
+        await page.click('.govuk-js-header-toggle')
+      })
 
-        it('should indicate the expanded state of the toggle button using aria-expanded', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
-
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+      it('removes the --open modifier class from the menu, hiding it', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__navigation',
+          el => el.classList.contains('govuk-header__navigation--open')
+        )
 
-          const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded'))
-          expect(toggleButtonAriaExpanded).toBe('false')
-        })
+        expect(hasOpenClass).toBeFalsy()
+      })
 
-        it('should indicate the open state of the navigation', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+      it('removes the --open modifier class from the menu button', async () => {
+        const hasOpenClass = await page.$eval('.govuk-header__menu-button',
+          el => el.classList.contains('govuk-header__menu-button--open')
+        )
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+        expect(hasOpenClass).toBeFalsy()
+      })
 
-          const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open'))
-          expect(navigationIsOpen).toBeFalsy()
-        })
+      it('exposes the hidden state of the menu using aria-hidden', async () => {
+        const ariaHidden = await page.$eval('.govuk-header__navigation',
+          el => el.getAttribute('aria-hidden')
+        )
 
-        it('should indicate the visible state of the navigation using aria-hidden', async () => {
-          await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' })
+        expect(ariaHidden).toBe('true')
+      })
 
-          await page.click('.govuk-js-header-toggle')
-          await page.click('.govuk-js-header-toggle')
+      it('exposes the collapsed state of the menu button using aria-expanded', async () => {
+        const ariaExpanded = await page.$eval('.govuk-header__menu-button',
+          el => el.getAttribute('aria-expanded')
+        )
 
-          const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden'))
-          expect(navigationAriaHidden).toBe('true')
-        })
+        expect(ariaExpanded).toBe('false')
       })
     })
   })
diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 4cb7c2c87e..c2088c17d5 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -35,7 +35,7 @@ params:
   - name: href
     type: string
     required: false
-    description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
+    description: Url of the navigation item anchor.
   - name: active
     type: boolean
     required: false
@@ -51,11 +51,11 @@ params:
 - name: navigationLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the navigation. Defaults to "Top Level Navigation".
+  description: Text for the `aria-label` attribute of the navigation. Defaults to "Navigation menu".
 - name: menuButtonLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide Top Level Navigation".
+  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide navigation menu".
 - name: containerClasses
   type: string
   required: false
@@ -233,6 +233,15 @@ examples:
       - href: '#3'
         html: <em>Navigation item 3</em>
 
+- name: navigation item with text without link
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - text: Navigation item 1
+      - text: Navigation item 2
+      - text: Navigation item 3
+
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
 - name: attributes
   hidden: true
@@ -257,3 +266,26 @@ examples:
         attributes:
           data-attribute: my-attribute
           data-attribute-2: my-attribute-2
+- name: navigation item with html as text
+  hidden: true
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - href: '#1'
+        text: <em>Navigation item 1</em>
+        active: true
+      - href: '#2'
+        text: <em>Navigation item 2</em>
+      - href: '#3'
+        text: <em>Navigation item 3</em>
+- name: navigation item with html without link
+  hidden: true
+  data:
+    serviceName: Service Name
+    serviceUrl: '/components/header'
+    navigation:
+      - html: <em>Navigation item 1</em>
+        active: true
+      - html: <em>Navigation item 2</em>
+      - html: <em>Navigation item 3</em>
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index 0b31f33948..058a0d5207 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -60,15 +60,19 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide Top Level Navigation') }}">Menu</button>
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide navigation menu') }}">Menu</button>
     <nav>
-      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Top Level Navigation') }}">
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Navigation menu') }}">
         {% for item in params.navigation %}
-          {% if item.href and (item.text or item.html) %}
+          {% if item.text or item.html %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
-              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% if item.href %}
+                <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% endif %}
                 {{ item.html | safe if item.html else item.text }}
-              </a>
+              {% if item.href %}
+                </a>
+              {% endif %}
             </li>
           {% endif %}
         {% endfor %}
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index 874b5ed4e2..11177592c5 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -123,7 +123,7 @@ describe('header', () => {
       const $component = $('.govuk-header')
       const $list = $component.find('ul.govuk-header__navigation')
 
-      expect($list.attr('aria-label')).toEqual('Top Level Navigation')
+      expect($list.attr('aria-label')).toEqual('Navigation menu')
     })
 
     it('allows navigation label to be customised', () => {
@@ -142,13 +142,34 @@ describe('header', () => {
       expect($activeItem.hasClass('govuk-header__navigation-item--active'))
     })
 
-    it('renders navigation item with html', () => {
+    it('allows navigation item text to be passed whilst escaping HTML entities', () => {
+      const $ = render('header', examples['navigation item with html as text'])
+
+      const $navigationLink = $('.govuk-header__navigation-item a')
+      expect($navigationLink.html()).toContain('&lt;em&gt;Navigation item 1&lt;/em&gt;')
+    })
+
+    it('allows navigation item HTML to be passed un-escaped', () => {
       const $ = render('header', examples['navigation item with html'])
 
       const $navigationLink = $('.govuk-header__navigation-item a')
       expect($navigationLink.html()).toContain('<em>Navigation item 1</em>')
     })
 
+    it('renders navigation item with text without a link', () => {
+      const $ = render('header', examples['navigation item with text without link'])
+
+      const $navigationItem = $('.govuk-header__navigation-item')
+      expect($navigationItem.html().trim()).toEqual('Navigation item 1')
+    })
+
+    it('renders navigation item with html without a link', () => {
+      const $ = render('header', examples['navigation item with html without link'])
+
+      const $navigationItem = $('.govuk-header__navigation-item')
+      expect($navigationItem.html()).toContain('<em>Navigation item 1</em>')
+    })
+
     it('renders navigation item anchor with attributes', () => {
       const $ = render('header', examples['navigation item with attributes'])
 
@@ -170,7 +191,7 @@ describe('header', () => {
 
         const $button = $('.govuk-header__menu-button')
 
-        expect($button.attr('aria-label')).toEqual('Show or hide Top Level Navigation')
+        expect($button.attr('aria-label')).toEqual('Show or hide navigation menu')
       })
       it('allows label to be customised', () => {
         const $ = render('header', examples['with custom menu button label'])
diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss
index 17632e077d..50e2659fe7 100644
--- a/src/govuk/components/input/_index.scss
+++ b/src/govuk/components/input/_index.scss
@@ -91,4 +91,87 @@
     max-width: 5.4ex;
   }
 
+  .govuk-input__wrapper {
+    display: flex;
+
+    .govuk-input {
+      flex: 0 1 auto;
+    }
+
+    .govuk-input:focus {
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
+    }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+
+      .govuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
+  }
+
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 40px;
+    @if $govuk-typography-use-rem {
+      min-width: govuk-px-to-rem(40px);
+    }
+    height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
+
+    padding: govuk-spacing(1);
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+
+    text-align: center;
+    @include govuk-media-query($until: tablet) {
+      line-height: 1.6;
+    }
+    white-space: nowrap;
+
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+
+    flex: 0 0 auto;
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
+  }
+
+  .govuk-input__prefix {
+    @include govuk-media-query($until: mobile) {
+      border-bottom: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      @include govuk-not-ie8 {
+        border-right: 0;
+      }
+    }
+  }
+
+  // Split prefix/suffix onto separate lines on narrow screens
+  .govuk-input__suffix {
+    @include govuk-media-query($until: mobile) {
+      border-top: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      @include govuk-not-ie8 {
+        border-left: 0;
+      }
+    }
+  }
 }
diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml
index b917dea526..9daffe5478 100644
--- a/src/govuk/components/input/input.yaml
+++ b/src/govuk/components/input/input.yaml
@@ -38,6 +38,48 @@ params:
   required: false
   description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
   isComponent: true
+- name: prefix
+  type: object
+  required: false
+  description: Options for the prefix element.
+  params:
+    - name: text
+      type: string
+      required: true
+      description: Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the prefix.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the prefix element.
+- name: suffix
+  type: object
+  required: false
+  description: Options for the suffix element.
+  params:
+    - name: text
+      type: string
+      required: true
+      description: Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the suffix element.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the suffix element.
 - name: formGroup
   type: object
   required: false
@@ -203,6 +245,68 @@ examples:
       type: text
       spellcheck: false
 
+  - name: with prefix
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      prefix:
+        text: £
+
+  - name: with suffix
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        text: kg
+
+  - name: with prefix and suffix
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix
+      name: cost
+      prefix:
+        text: £
+      suffix:
+        text: per item
+  - name: with prefix and long suffix
+    data:
+      label:
+        text: Cost per item, in pounds, per household member
+      id: input-with-prefix-suffix
+      name: cost
+      prefix:
+        text: £
+      suffix:
+        text: per household member
+  - name: with prefix and suffix and error
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix
+      name: cost
+      prefix:
+        text: £
+      suffix:
+        text: per item
+      errorMessage:
+        text: Error message goes here
+  - name: with prefix and suffix and width modifier
+    data:
+      label:
+        text: Cost per item, in pounds
+      id: input-with-prefix-suffix
+      name: cost
+      classes: govuk-input--width-5
+      prefix:
+        text: £
+      suffix:
+        text: per item
+
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: classes
     hidden: true
@@ -257,3 +361,82 @@ examples:
     data:
       inputmode: decimal
 
+  - name: with prefix with html as text
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      prefix:
+        text: <span>£</span>
+  - name: with prefix with html
+    hidden: true
+    data:
+      label:
+        html: Amount, in pounds
+      id: input-with-prefix
+      name: amount
+      prefix:
+        html: <span>£</span>
+  - name: with prefix with classes
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element
+      name: amount
+      prefix:
+        text: £
+        classes: app-input__prefix--custom-modifier
+  - name: with prefix with attributes
+    hidden: true
+    data:
+      label:
+        text: Amount, in pounds
+      id: input-with-prefix-element
+      name: amount
+      prefix:
+        text: £
+        attributes:
+          data-attribute: value
+
+  - name: with suffix with html as text
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        text: <span>kg</span>
+  - name: with suffix with html
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+  - name: with suffix with classes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+        classes: app-input__suffix--custom-modifier
+  - name: with suffix with attributes
+    hidden: true
+    data:
+      label:
+        text: Weight, in kilograms
+      id: input-with-suffix
+      name: weight
+      suffix:
+        html: <span>kg</span>
+        attributes:
+          data-attribute: value
diff --git a/src/govuk/components/input/template.njk b/src/govuk/components/input/template.njk
index 25dcb50883..11dd50c013 100644
--- a/src/govuk/components/input/template.njk
+++ b/src/govuk/components/input/template.njk
@@ -37,6 +37,15 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
+
+{%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
+
+  {%- if params.prefix.text or params.prefix.html %}
+    <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
+    </div>
+  {% endif -%}
+
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if params.value %} value="{{ params.value}}"{% endif %}
@@ -45,4 +54,12 @@
   {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
   {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+
+  {%- if params.suffix.text or params.suffix.html %}
+    <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
+    </div>
+  {% endif -%}
+
+{%- if params.prefix or params.suffix %}</div>{% endif %}
 </div>
diff --git a/src/govuk/components/input/template.test.js b/src/govuk/components/input/template.test.js
index d750956280..099a433505 100644
--- a/src/govuk/components/input/template.test.js
+++ b/src/govuk/components/input/template.test.js
@@ -99,6 +99,13 @@ describe('Input', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.hasClass('extra-class')).toBeTruthy()
     })
+
+    it('doesn\'t render the input wrapper', () => {
+      const $ = render('input', examples.default)
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeFalsy()
+    })
   })
 
   describe('when it includes a hint', () => {
@@ -281,4 +288,135 @@ describe('Input', () => {
       expect($component.attr('inputmode')).toEqual('decimal')
     })
   })
+
+  describe('when it includes a prefix', () => {
+    it('renders the input wrapper', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeTruthy()
+    })
+
+    it('renders the prefix inside the wrapper', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.length).toBeTruthy()
+    })
+
+    it('renders the text in the prefix', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&#xA3;')
+    })
+
+    it('allows prefix text to be passed whilst escaping HTML entities', () => {
+      const $ = render('input', examples['with prefix with html as text'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&lt;span&gt;&#xA3;&lt;/span&gt;')
+    })
+
+    it('allows prefix HTML to be passed un-escaped', () => {
+      const $ = render('input', examples['with prefix with html'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('<span>&#xA3;</span>')
+    })
+
+    it('hides the prefix from screen readers using the aria-hidden attribute', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.attr('aria-hidden')).toEqual('true')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('input', examples['with prefix with classes'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.hasClass('app-input__prefix--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('input', examples['with prefix with attributes'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+      expect($prefix.attr('data-attribute')).toEqual('value')
+    })
+  })
+
+  describe('when it includes a suffix', () => {
+    it('renders the input wrapper', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $wrapper = $('.govuk-form-group > .govuk-input__wrapper')
+      expect($wrapper.length).toBeTruthy()
+    })
+
+    it('renders the suffix inside the wrapper', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.length).toBeTruthy()
+    })
+
+    it('renders the text in the prefix', () => {
+      const $ = render('input', examples['with prefix'])
+
+      const $prefix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix')
+
+      expect($prefix.html()).toEqual('&#xA3;')
+    })
+
+    it('allows suffix text to be passed whilst escaping HTML entities', () => {
+      const $ = render('input', examples['with suffix with html as text'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+
+      expect($suffix.html()).toEqual('&lt;span&gt;kg&lt;/span&gt;')
+    })
+
+    it('allows suffix HTML to be passed un-escaped', () => {
+      const $ = render('input', examples['with suffix with html'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+
+      expect($suffix.html()).toEqual('<span>kg</span>')
+    })
+
+    it('hides the suffix from screen readers using the aria-hidden attribute', () => {
+      const $ = render('input', examples['with suffix'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.attr('aria-hidden')).toEqual('true')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('input', examples['with suffix with classes'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.hasClass('app-input__suffix--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('input', examples['with suffix with attributes'])
+
+      const $suffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__suffix')
+      expect($suffix.attr('data-attribute')).toEqual('value')
+    })
+  })
+
+  describe('when it includes both a prefix and a suffix', () => {
+    it('renders the prefix before the suffix', () => {
+      const $ = render('input', examples['with prefix and suffix'])
+
+      const $prefixBeforeSuffix = $('.govuk-form-group > .govuk-input__wrapper > .govuk-input__prefix ~ .govuk-input__suffix')
+      expect($prefixBeforeSuffix.length).toBeTruthy()
+    })
+  })
 })
diff --git a/src/govuk/components/panel/_index.scss b/src/govuk/components/panel/_index.scss
index 58496d70c5..6054d6691f 100644
--- a/src/govuk/components/panel/_index.scss
+++ b/src/govuk/components/panel/_index.scss
@@ -20,6 +20,12 @@
   .govuk-panel--confirmation {
     color: govuk-colour("white");
     background: govuk-colour("green", $legacy: "turquoise");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentColor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
   }
 
   .govuk-panel__title {