From 064b56783d2f4174e37cddcbfbc6e2d0d09b6864 Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Mon, 27 Jan 2025 16:36:42 +0000
Subject: [PATCH 1/3] Make form control ID attributes optional

Update the following components to use their `name` attribute as the default value for the `id` attribute. Mark the `id` parameter as optional in documentation.

- Character count
- File upload
- (Text) input
- Password input
- Select
- Textarea
---
 .../components/character-count/character-count.yaml  |  4 ++--
 .../govuk/components/character-count/template.njk    |  9 +++++----
 .../govuk/components/file-upload/file-upload.yaml    |  4 ++--
 .../src/govuk/components/file-upload/template.njk    | 12 +++++++-----
 .../src/govuk/components/input/input.yaml            |  4 ++--
 .../src/govuk/components/input/template.njk          |  9 +++++----
 .../components/password-input/password-input.yaml    |  4 ++--
 .../src/govuk/components/password-input/template.njk |  6 ++++--
 .../src/govuk/components/select/select.yaml          |  4 ++--
 .../src/govuk/components/select/template.njk         | 10 ++++++----
 .../src/govuk/components/textarea/template.njk       | 10 ++++++----
 .../src/govuk/components/textarea/textarea.yaml      |  4 ++--
 12 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
index cd7369e179..0bb16cf374 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
@@ -1,8 +1,8 @@
 params:
   - name: id
     type: string
-    required: true
-    description: The ID of the textarea.
+    required: false
+    description: The ID of the textarea. Defaults to the value of `name`.
   - name: name
     type: string
     required: true
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/template.njk b/packages/govuk-frontend/src/govuk/components/character-count/template.njk
index d2c4ce017b..bf524ba63b 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/character-count/template.njk
@@ -12,11 +12,12 @@
 {%- set textareaDescriptionLength = params.maxwords or params.maxlength -%}
 {%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') -%}
 {%- set textareaDescriptionTextNoLimit = textareaDescriptionText | replace('%{count}', textareaDescriptionLength) if not hasNoLimit -%}
+{%- set id = params.id if params.id else params.name -%}
 
 {%- set countMessageHtml %}
 {{ govukHint({
   text: textareaDescriptionTextNoLimit,
-  id: params.id + '-info',
+  id: id + '-info',
   classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes)
 }) | trim }}
 {% if params.formGroup.afterInput %}
@@ -91,9 +92,9 @@
 {% endfor -%}
 
 {{ govukTextarea({
-  id: params.id,
+  id: id,
   name: params.name,
-  describedBy: params.id + '-info',
+  describedBy: id + '-info',
   rows: params.rows,
   spellcheck: params.spellcheck,
   value: params.value,
@@ -112,7 +113,7 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   },
   hint: params.hint,
   errorMessage: params.errorMessage,
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
index fde79e6588..455465362f 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -5,8 +5,8 @@ params:
     description: The name of the input, which is submitted with the form data.
   - name: id
     type: string
-    required: true
-    description: The ID of the input.
+    required: false
+    description: The ID of the input. Defaults to the value of `name`.
   - name: value
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
index a3b11c7b90..d2386de84d 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
@@ -5,7 +5,9 @@
 
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
+{%- set describedBy = params.describedBy if params.describedBy else "" -%}
+{%- set id = params.id if params.id else params.name -%}
+
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
   {{- govukAttributes(params.formGroup.attributes) }}>
   {{ govukLabel({
@@ -14,10 +16,10 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   }) | trim | indent(2) }}
 {% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
+  {% set hintId = id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ govukHint({
     id: hintId,
@@ -28,7 +30,7 @@
   }) | trim | indent(2) }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ govukErrorMessage({
     id: errorId,
@@ -42,7 +44,7 @@
 {% if params.formGroup.beforeInput %}
   {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
-  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
+  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ id }}" name="{{ params.name }}" type="file"
   {%- if params.value %} value="{{ params.value }}"{% endif %}
   {%- if params.disabled %} disabled{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
index bfe5a807c2..e6badbe255 100644
--- a/packages/govuk-frontend/src/govuk/components/input/input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -1,8 +1,8 @@
 params:
   - name: id
     type: string
-    required: true
-    description: The ID of the input.
+    required: false
+    description: The ID of the input. Defaults to the value of `name`.
   - name: name
     type: string
     required: true
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
index c3e1431aef..5d16015e00 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -17,6 +17,7 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else undefined -%}
+{%- set id = params.id if params.id else params.name -%}
 
 {%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
 {%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
@@ -27,7 +28,7 @@
   <input
     {{- govukAttributes({
       class: classNames,
-      id: params.id,
+      id: id,
       name: params.name,
       type: params.type | default("text", true),
       spellcheck: {
@@ -83,10 +84,10 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   }) | trim | indent(2) }}
 {% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
+  {% set hintId = id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ govukHint({
     id: hintId,
@@ -97,7 +98,7 @@
   }) | trim | indent(2) }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ govukErrorMessage({
     id: errorId,
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
index 33e6d92be2..48dbb65990 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
@@ -1,8 +1,8 @@
 params:
   - name: id
     type: string
-    required: true
-    description: The ID of the input.
+    required: false
+    description: The ID of the input. Defaults to the value of `name`.
   - name: name
     type: string
     required: true
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/template.njk b/packages/govuk-frontend/src/govuk/components/password-input/template.njk
index 673a3723d2..ce8fa400a4 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/password-input/template.njk
@@ -4,6 +4,8 @@
 {% from "../button/macro.njk" import govukButton -%}
 {% from "../input/macro.njk" import govukInput -%}
 
+{%- set id = params.id if params.id else params.name -%}
+
 {% set attributesHtml -%}
   {{- ' data-module="govuk-password-input"' | safe }}
 
@@ -49,7 +51,7 @@
   classes: "govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" + (" " + params.button.classes if params.button.classes),
   text: params.showPasswordText | default("Show"),
   attributes: {
-    "aria-controls": params.id,
+    "aria-controls": id,
     "aria-label": params.showPasswordAriaLabelText | default("Show password"),
     "hidden": {
       value: true,
@@ -78,7 +80,7 @@
   hint: params.hint,
   classes: "govuk-password-input__input govuk-js-password-input-input" + (" " + params.classes if params.classes),
   errorMessage: params.errorMessage,
-  id: params.id,
+  id: id,
   name: params.name,
   type: "password",
   spellcheck: false,
diff --git a/packages/govuk-frontend/src/govuk/components/select/select.yaml b/packages/govuk-frontend/src/govuk/components/select/select.yaml
index d7689c2b65..6295a62eb9 100644
--- a/packages/govuk-frontend/src/govuk/components/select/select.yaml
+++ b/packages/govuk-frontend/src/govuk/components/select/select.yaml
@@ -1,8 +1,8 @@
 params:
   - name: id
     type: string
-    required: true
-    description: ID for each select box.
+    required: false
+    description: ID for the select box. Defaults to the value of `name`.
   - name: name
     type: string
     required: true
diff --git a/packages/govuk-frontend/src/govuk/components/select/template.njk b/packages/govuk-frontend/src/govuk/components/select/template.njk
index 716b50cb98..e5a4faf3a2 100644
--- a/packages/govuk-frontend/src/govuk/components/select/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/select/template.njk
@@ -6,6 +6,8 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
+{%- set id = params.id if params.id else params.name -%}
+
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
   {{- govukAttributes(params.formGroup.attributes) }}>
   {{ govukLabel({
@@ -14,10 +16,10 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   }) | trim | indent(2) }}
 {% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
+  {% set hintId = id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ govukHint({
     id: hintId,
@@ -28,7 +30,7 @@
   }) | trim | indent(2) }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ govukErrorMessage({
     id: errorId,
@@ -43,7 +45,7 @@
   {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
   <select class="govuk-select
-    {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}"
+    {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ id }}" name="{{ params.name }}"
     {%- if params.disabled %} disabled{% endif %}
     {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
     {{- govukAttributes(params.attributes) }}>
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.njk b/packages/govuk-frontend/src/govuk/components/textarea/template.njk
index bfc7e5b5b4..a0efee6fab 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/textarea/template.njk
@@ -6,6 +6,8 @@
 {#- a record of other elements that we need to associate with the input using
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
+{%- set id = params.id if params.id else params.name -%}
+
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}"
   {{- govukAttributes(params.formGroup.attributes) }}>
   {{ govukLabel({
@@ -14,10 +16,10 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: id
   }) | trim | indent(2) }}
 {% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
+  {% set hintId = id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
   {{ govukHint({
     id: hintId,
@@ -28,7 +30,7 @@
   }) | trim | indent(2) }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ govukErrorMessage({
     id: errorId,
@@ -42,7 +44,7 @@
 {% if params.formGroup.beforeInput %}
   {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
-  <textarea class="govuk-textarea {%- if params.errorMessage %} govuk-textarea--error{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{{ params.rows | default(5, true) }}"
+  <textarea class="govuk-textarea {%- if params.errorMessage %} govuk-textarea--error{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ id }}" name="{{ params.name }}" rows="{{ params.rows | default(5, true) }}"
   {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if params.disabled %} disabled{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
index 69edca64fb..64c0d659b4 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
+++ b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
@@ -1,8 +1,8 @@
 params:
   - name: id
     type: string
-    required: true
-    description: The ID of the textarea.
+    required: false
+    description: The ID of the textarea. Defaults to the value of `name`.
   - name: name
     type: string
     required: true

From 404c480b78e1a643dd13a6b3e0b53b65a7ba4c08 Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Tue, 28 Jan 2025 16:54:05 +0000
Subject: [PATCH 2/3] Add tests for automatic and manual ID setting

---
 .../components/character-count/character-count.yaml  |  9 ++++++++-
 .../components/character-count/template.test.js      | 12 ++++++++++--
 .../govuk/components/file-upload/file-upload.yaml    |  8 +++++++-
 .../govuk/components/file-upload/template.test.js    | 12 ++++++++++--
 .../src/govuk/components/input/input.yaml            |  8 +++++++-
 .../govuk/components/input/template.jsdom.test.js    | 11 +++++++++--
 .../components/password-input/password-input.yaml    |  8 +++++++-
 .../govuk/components/password-input/template.test.js | 12 ++++++++++--
 .../src/govuk/components/select/select.yaml          |  8 +++++++-
 .../src/govuk/components/select/template.test.js     | 12 ++++++++++--
 .../src/govuk/components/textarea/template.test.js   | 12 ++++++++++--
 .../src/govuk/components/textarea/textarea.yaml      |  8 +++++++-
 12 files changed, 102 insertions(+), 18 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
index 0bb16cf374..afc72884ef 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
@@ -135,7 +135,6 @@ examples:
   - name: default
     options:
       name: more-detail
-      id: more-detail
       maxlength: 10
       label:
         text: Can you provide more detail?
@@ -255,6 +254,14 @@ examples:
       label:
         text: With classes
       classes: app-character-count--custom-modifier
+  - name: id
+    hidden: true
+    options:
+      id: character-count-id
+      name: test-name
+      maxlength: 10
+      label:
+        text: With custom id
   - name: attributes
     hidden: true
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/template.test.js b/packages/govuk-frontend/src/govuk/components/character-count/template.test.js
index 1582372805..3eda7180de 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/character-count/template.test.js
@@ -12,11 +12,11 @@ describe('Character count', () => {
   })
 
   describe('default example', () => {
-    it('renders with id', () => {
+    it('autopopulates default id from name', () => {
       const $ = render('character-count', examples.default)
 
       const $component = $('.govuk-js-character-count')
-      expect($component.attr('id')).toBe('more-detail')
+      expect($component.attr('id')).toBe($component.attr('name'))
     })
 
     it('renders with name', () => {
@@ -35,6 +35,14 @@ describe('Character count', () => {
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      const $ = render('character-count', examples.id)
+
+      const $component = $('.govuk-js-character-count')
+      expect($component.attr('id')).not.toBe($component.attr('name'))
+      expect($component.attr('id')).toBe('character-count-id')
+    })
+
     it('renders with classes', () => {
       const $ = render('character-count', examples.classes)
 
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
index 455465362f..0ce412ab04 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -85,7 +85,6 @@ params:
 examples:
   - name: default
     options:
-      id: file-upload-1
       name: file-upload-1
       label:
         text: Upload a file
@@ -149,6 +148,13 @@ examples:
       label:
         text: Upload a file
       classes: app-file-upload--custom-modifier
+  - name: id
+    hidden: true
+    options:
+      id: file-upload-id
+      name: test-name
+      label:
+        text: Upload a file
   - name: with describedBy
     hidden: true
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
index 0aaee979a9..7fad86a7c4 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
@@ -13,11 +13,11 @@ describe('File upload', () => {
   })
 
   describe('default example', () => {
-    it('renders with id', () => {
+    it('autopopulates default id from name', () => {
       const $ = render('file-upload', examples.default)
 
       const $component = $('.govuk-file-upload')
-      expect($component.attr('id')).toBe('file-upload-1')
+      expect($component.attr('id')).toBe($component.attr('name'))
     })
 
     it('renders with name', () => {
@@ -36,6 +36,14 @@ describe('File upload', () => {
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      const $ = render('file-upload', examples.id)
+
+      const $component = $('.govuk-file-upload')
+      expect($component.attr('id')).not.toBe($component.attr('name'))
+      expect($component.attr('id')).toBe('file-upload-id')
+    })
+
     it('renders with classes', () => {
       const $ = render('file-upload', examples.classes)
 
diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
index e6badbe255..681e6b253d 100644
--- a/packages/govuk-frontend/src/govuk/components/input/input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -166,7 +166,6 @@ examples:
     options:
       label:
         text: National Insurance number
-      id: input-example
       name: test-name
   - name: with hint text
     options:
@@ -397,6 +396,13 @@ examples:
       label:
         text: With classes
       classes: app-input--custom-modifier
+  - name: id
+    hidden: true
+    options:
+      id: input-id
+      name: testing-name
+      label:
+        text: With custom id
   - name: custom type
     hidden: true
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js
index 248d19087b..d0f7ce94f6 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js
+++ b/packages/govuk-frontend/src/govuk/components/input/template.jsdom.test.js
@@ -17,8 +17,8 @@ describe('Input', () => {
       $label = document.querySelector('.govuk-label')
     })
 
-    it('sets the `id` attribute based on the `id` option', () => {
-      expect($component).toHaveAttribute('id', 'input-example')
+    it('autopopulates `id` based on the `name` option', () => {
+      expect($component).toHaveAttribute('id', $component.name)
     })
 
     it('sets the `name` attribute based on the `name` option', () => {
@@ -65,6 +65,13 @@ describe('Input', () => {
   })
 
   describe('custom options', () => {
+    it('sets the `id` attribute based on the `id` option', () => {
+      document.body.innerHTML = render('input', examples.id)
+
+      const $component = document.querySelector('.govuk-input')
+      expect($component).toHaveAttribute('id', 'input-id')
+    })
+
     it('includes additional classes from the `classes` option', () => {
       document.body.innerHTML = render('input', examples.classes)
 
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
index 48dbb65990..d335967b3a 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/password-input/password-input.yaml
@@ -124,7 +124,6 @@ examples:
     options:
       label:
         text: Password
-      id: password-input
       name: password
   - name: with hint text
     options:
@@ -189,6 +188,13 @@ examples:
       label:
         text: With classes
       classes: app-input--custom-modifier
+  - name: id
+    hidden: true
+    options:
+      id: password-id
+      name: testing-name
+      label:
+        text: With custom id
   - name: value
     hidden: true
     options:
diff --git a/packages/govuk-frontend/src/govuk/components/password-input/template.test.js b/packages/govuk-frontend/src/govuk/components/password-input/template.test.js
index 4b13c1f7c5..37a416da47 100644
--- a/packages/govuk-frontend/src/govuk/components/password-input/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/password-input/template.test.js
@@ -9,11 +9,11 @@ describe('Password input', () => {
   })
 
   describe('default example', () => {
-    it('renders with id', () => {
+    it('autopopulates default id from name', () => {
       const $ = render('password-input', examples.default)
 
       const $component = $('.govuk-input')
-      expect($component.attr('id')).toBe('password-input')
+      expect($component.attr('id')).toBe($component.attr('name'))
     })
 
     it('renders with name', () => {
@@ -116,6 +116,14 @@ describe('Password input', () => {
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      const $ = render('password-input', examples.id)
+
+      const $component = $('.govuk-input')
+      expect($component.attr('id')).not.toBe($component.attr('name'))
+      expect($component.attr('id')).toBe('password-id')
+    })
+
     it('renders with classes', () => {
       const $ = render('password-input', examples.classes)
 
diff --git a/packages/govuk-frontend/src/govuk/components/select/select.yaml b/packages/govuk-frontend/src/govuk/components/select/select.yaml
index 6295a62eb9..2ec9edba08 100644
--- a/packages/govuk-frontend/src/govuk/components/select/select.yaml
+++ b/packages/govuk-frontend/src/govuk/components/select/select.yaml
@@ -110,7 +110,6 @@ params:
 examples:
   - name: default
     options:
-      id: select-1
       name: select-1
       label:
         text: Label text goes here
@@ -123,6 +122,13 @@ examples:
         - value: 3
           text: GOV.UK frontend option 3
           disabled: true
+  - name: id
+    options:
+      id: select-id
+      name: test-name
+      label:
+        text: Horse with no name
+      items: []
   - name: with no items
     options:
       id: select-1
diff --git a/packages/govuk-frontend/src/govuk/components/select/template.test.js b/packages/govuk-frontend/src/govuk/components/select/template.test.js
index 4d04795867..f2df25e950 100644
--- a/packages/govuk-frontend/src/govuk/components/select/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/select/template.test.js
@@ -13,11 +13,11 @@ describe('Select', () => {
   })
 
   describe('by default', () => {
-    it('renders with id', () => {
+    it('autopopulates default id from name', () => {
       const $ = render('select', examples.default)
 
       const $component = $('.govuk-select')
-      expect($component.attr('id')).toBe('select-1')
+      expect($component.attr('id')).toBe($component.attr('name'))
     })
 
     it('renders with name', () => {
@@ -135,6 +135,14 @@ describe('Select', () => {
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      const $ = render('select', examples.id)
+
+      const $component = $('.govuk-select')
+      expect($component.attr('id')).not.toBe($component.attr('name'))
+      expect($component.attr('id')).toBe('select-id')
+    })
+
     it('renders with classes', () => {
       const $ = render('select', examples['with full width override'])
 
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.test.js b/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
index c13e352547..5380a0d470 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/textarea/template.test.js
@@ -13,11 +13,11 @@ describe('Textarea', () => {
   })
 
   describe('default example', () => {
-    it('renders with id', () => {
+    it('autopopulates default id from name', () => {
       const $ = render('textarea', examples.default)
 
       const $component = $('.govuk-textarea')
-      expect($component.attr('id')).toBe('more-detail')
+      expect($component.attr('id')).toBe($component.attr('name'))
     })
 
     it('renders with name', () => {
@@ -43,6 +43,14 @@ describe('Textarea', () => {
   })
 
   describe('custom options', () => {
+    it('renders with id', () => {
+      const $ = render('textarea', examples.id)
+
+      const $component = $('.govuk-textarea')
+      expect($component.attr('id')).not.toBe($component.attr('name'))
+      expect($component.attr('id')).toBe('textarea-id')
+    })
+
     it('renders with classes', () => {
       const $ = render('textarea', examples.classes)
 
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
index 64c0d659b4..6338184ae2 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
+++ b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
@@ -98,7 +98,6 @@ examples:
   - name: default
     options:
       name: more-detail
-      id: more-detail
       label:
         text: Can you provide more detail?
   - name: with hint
@@ -181,6 +180,13 @@ examples:
       spellcheck: false
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
+  - name: id
+    hidden: true
+    options:
+      id: textarea-id
+      name: test-name
+      label:
+        text: With custom id
   - name: classes
     hidden: true
     options:

From 155f264497c2852e901966a59bc08688ec224b19 Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Tue, 28 Jan 2025 18:09:40 +0000
Subject: [PATCH 3/3] Add changelog entry

---
 CHANGELOG.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aedbc1e669..c195e897bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,18 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### New features
+
+#### Form control components now have default `id` attributes
+
+If you're using the included Nunjucks macros, the Text input, Textarea, Password input, Character count, File upload, and Select components now automatically use the value of the `name` parameter for the `id` parameter.
+
+This means that you only have to provide the `name` parameters if they both have the same value.
+
+Note that the Date input component still requires an `id` attribute.
+
+This change was introduced in [pull request #5658: Update form control components to set a default `id` based on `name`](https://github.com/alphagov/govuk-frontend/pull/5658).
+
 ### Deprecated features
 
 #### Migrate to the new organisation colour palette