[WIP] Define default `id` parameter values for various components #5171

querkmachine · 2024-07-24T16:03:26Z

Many components in the Design System have a functional requirement for an id to be defined in order to work as expected. As it stands, some components provide a default id value if one isn't specified, whereas other components don't. We already do this ourselves for the Checkboxes and Radios components, by having the idPrefix to match the name parameter by default.

This has led to instances of developers forgetting to set ids and for some ports of govuk-frontend to implement their own methods of setting default ids. The ASP.NET Core and Jinja ports both fall back to name, and the Vue port automatically generates unique IDs if one isn't specified.

Related to #3497.

Changes

Everywhere an id is required, but lacked a default or fallback value, now has a default or fallback defined.
- On form controls, this fallback is to the name parameter. Otherwise, it is to a hardcoded string (the component name).
Update Nunjucks parameter documentation for modified components.
Update default examples to remove explicitly defined id parameters.

Components changed

Previously, all of these components required an id attribute to work as expected and/or to render valid and accessible HTML.

Accordion: ID defaults to string "accordion". Used for the root element and as a prefix for child element IDs.
Character count: ID falls back to name parameter. Used for the textarea and for related labels/hint IDs.
Date input: ID falls back to the namePrefix parameter if it's defined, otherwise defaults to the string "date-input". Used for the root element and to prefix the IDs of child inputs.
File upload: ID falls back to name parameter. Used for the input and for related labels/hint IDs.
Select: ID falls back to name parameter. Used for the select and for related labels/hint IDs.
Text input: ID falls back to name parameter. Used for the input and for related labels/hint IDs.
Textarea: ID falls back to name parameter. Used for the textarea and for related labels/hint IDs.

Tabs is a bit of a weird case in that its id and idPrefix parameters were completely detached from one another, both needing setting individually even if they were the same value.

This was incongruent with similar components, where the idPrefix always falls back to the id or name. In this case, I've made it so that idPrefix falls back to match the id, and the id defaults to "tabs".

Todo

There are no new or modified tests for this change.
Changelog entry.

Thoughts

There feels like there's greater value to fallbacks existing for form controls (where we can match the name) than non-form components like the Accordion and Tabs. I'm open to not setting defaults for non-form components, but having defaults for everything feels more consistent.
Cases where the fallback is the name parameter can introduce a potential issue — names can contain characters that ids cannot, such as square brackets. There are no attempts to protect against the creation of invalid ids here, though one could potentially be introduced, such as 'slugifying' the name.

github-actions · 2024-07-24T16:05:13Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.41 KiB
dist/govuk-frontend-development.min.js	42.7 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.79 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	87.12 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.25 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	1.74 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.4 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.69 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	7.13 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	82.57 KiB	40.4 KiB
accordion.mjs	26.58 KiB	13.41 KiB
button.mjs	9.09 KiB	3.78 KiB
character-count.mjs	25.39 KiB	10.9 KiB
checkboxes.mjs	7.81 KiB	3.42 KiB
error-summary.mjs	10.99 KiB	4.54 KiB
exit-this-page.mjs	20.2 KiB	10.34 KiB
header.mjs	6.46 KiB	3.22 KiB
notification-banner.mjs	9.35 KiB	3.7 KiB
password-input.mjs	18.24 KiB	8.33 KiB
radios.mjs	6.81 KiB	2.98 KiB
service-navigation.mjs	6.44 KiB	3.26 KiB
skip-link.mjs	6.4 KiB	2.76 KiB
tabs.mjs	12.04 KiB	6.67 KiB

View stats and visualisations on the review app

Action run for f795005

github-actions · 2024-07-24T16:05:34Z

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html b/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
index 36bad56ef..2113da2ac 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
@@ -1,13 +1,13 @@
-<div class="govuk-accordion" data-module="govuk-accordion" id="default-example">
+<div class="govuk-accordion" data-module="govuk-accordion" id="accordion">
   <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
-        <span class="govuk-accordion__section-button" id="default-example-heading-1">
+        <span class="govuk-accordion__section-button" id="accordion-heading-1">
           Section A
         </span>
       </h2>
     </div>
-    <div id="default-example-content-1" class="govuk-accordion__section-content">
+    <div id="accordion-content-1" class="govuk-accordion__section-content">
       <p class="govuk-body">
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
       </p>
@@ -16,12 +16,12 @@
   <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
-        <span class="govuk-accordion__section-button" id="default-example-heading-2">
+        <span class="govuk-accordion__section-button" id="accordion-heading-2">
           Section B
         </span>
       </h2>
     </div>
-    <div id="default-example-content-2" class="govuk-accordion__section-content">
+    <div id="accordion-content-2" class="govuk-accordion__section-content">
       <ul class="govuk-list govuk-list--bullet">
         <li>Example item 2</li>
       </ul>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
index 2809765ef..50018ee7b 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
@@ -1,27 +1,27 @@
 <div class="govuk-form-group">
-  <div class="govuk-date-input" id="dob">
+  <div class="govuk-date-input" id="date-input">
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-day">
+        <label class="govuk-label govuk-date-input__label" for="date-input-day">
           Day
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-day" name="day" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-month">
+        <label class="govuk-label govuk-date-input__label" for="date-input-month">
           Month
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-month" name="month" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-year">
+        <label class="govuk-label govuk-date-input__label" for="date-input-year">
           Year
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="date-input-year" name="year" type="text" inputmode="numeric">
       </div>
     </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
index 61ba3dedf..8ec3a9ceb 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-1">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
index c3a5b6e63..836799c6e 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="file-upload-3">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
index 952c50d0b..a080f1ffe 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-2">
     Upload your photo
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
index 85845be54..46d56166b 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="file-upload-1">
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
index b5249c7b2..3a0e3c6a1 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="file-upload-1">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
index 68d350f46..4bac9938e 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-4">
     Upload a photo
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-default.html b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
index 6114d0567..a6aced5b0 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
@@ -1,6 +1,6 @@
 <div class="govuk-form-group">
-  <label class="govuk-label" for="input-example">
+  <label class="govuk-label" for="test-name">
     National Insurance number
   </label>
-  <input class="govuk-input" id="input-example" name="test-name" type="text">
+  <input class="govuk-input" id="test-name" name="test-name" type="text">
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-default.html b/packages/govuk-frontend/dist/govuk/components/select/template-default.html
index 4d093050b..4acb92d3e 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
index 99c41b088..b46475d71 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
index 41ddf5c54..85fe08094 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="select-2">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
index 9f3e543bf..c6698f676 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="select-3">
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
index 6fd4a7caa..31d742e50 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Horse with no name
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
index 2ab39b640..5a34fc6a1 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
index 4d093050b..4acb92d3e 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
index 31cd5352b..3017988a2 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
@@ -1,4 +1,4 @@
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div id="tabs" class="govuk-tabs" data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     Contents
   </h2>
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
index 9ea906404..83ec33468 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
@@ -1,4 +1,4 @@
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div id="tabs" class="govuk-tabs" data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     Contents
   </h2>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
index 3b27ac027..a25f38190 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="more-detail">
     Can you provide more detail?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
index 4b8839869..c33164099 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-autocomplete-attribute">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
index 747b7e241..bf1be61b8 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="full-address">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
index 8f84d7945..90372d438 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="full-address">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
index bf9316908..bf1f7b439 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="no-ni-reason">
     Why can’t you provide a National Insurance number?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
index 764f12181..2e6381e82 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="more-detail">
     Can you provide more detail?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
index 5624b6d9d..13b8a05eb 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
index 9d2b81d0a..e9934040b 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="textarea-with-page-heading">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
index 874294dae..a5f6e64ab 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-spellcheck-disabled">
     Spellcheck is disabled
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
index 0afbe53c5..b75907580 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-spellcheck-enabled">
     Spellcheck is enabled

Action run for f795005

github-actions · 2024-07-24T16:05:35Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
index bbb340a24..0a17c240c 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
@@ -4,7 +4,6 @@
         {
             "name": "default",
             "options": {
-                "id": "default-example",
                 "items": [
                     {
                         "heading": {
@@ -28,7 +27,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"accordion-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"accordion-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with additional descriptions",
@@ -225,6 +224,27 @@
             "screenshot": false,
             "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "custom-id",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"custom-id\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"custom-id-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"custom-id-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        Some content\n      </p>\n    </div>\n  </div>\n</div>"
+        },
         {
             "name": "classes",
             "options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
index 9a0ef5939..5c51c179e 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
@@ -2,7 +2,7 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "Must be unique across the domain of your service if `rememberExpanded` is `true` (as the expanded state of individual instances of the component persists across page loads using [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-control` attributes."
     },
     {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
index 775ea7e5b..138d9851a 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
@@ -5,7 +5,6 @@
             "name": "default",
             "options": {
                 "name": "more-detail",
-                "id": "more-detail",
                 "maxlength": 10,
                 "label": {
                     "text": "Can you provide more detail?"
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
index 01e8ebfb2..ff6e301fb 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the textarea."
+        "required": false,
+        "description": "The ID of the textarea and also as a prefix for the `id`s of the textarea's hints, so that those `id`s can be the target of `aria-describedby` attributes. Defaults to matching `name`."
     },
     {
         "name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
index b1fd49ec5..2f154104f 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
@@ -3,14 +3,11 @@
     "fixtures": [
         {
             "name": "default",
-            "options": {
-                "id": "dob"
-            },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "complete question",
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
index 5491b1d44..864365628 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "This is used for the main component and to compose the ID attribute for each item."
+        "required": false,
+        "description": "This is used for the main component and to compose the ID attribute for each item. Defaults to `namePrefix` if set, otherwise uses `\"date-input\"`."
     },
     {
         "name": "namePrefix",
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index 4a36de2a3..4dbf10cc9 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -4,7 +4,6 @@
         {
             "name": "default",
             "options": {
-                "id": "file-upload-1",
                 "name": "file-upload-1",
                 "label": {
                     "text": "Upload a file"
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
index c7608479a..b894f0340 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
@@ -8,8 +8,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the input."
+        "required": false,
+        "description": "The ID of the input. Defaults to matching `name`."
     },
     {
         "name": "value",
diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index deaf8111d..45aa1a313 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -7,14 +7,13 @@
                 "label": {
                     "text": "National Insurance number"
                 },
-                "id": "input-example",
                 "name": "test-name"
             },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n  <input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"test-name\">\n    National Insurance number\n  </label>\n  <input class=\"govuk-input\" id=\"test-name\" name=\"test-name\" type=\"text\">\n</div>"
         },
         {
             "name": "with hint text",
@@ -480,6 +479,21 @@
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n  <input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "test-id",
+                "name": "different-name",
+                "label": {
+                    "text": "With custom ID"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"test-id\">\n    With custom ID\n  </label>\n  <input class=\"govuk-input\" id=\"test-id\" name=\"different-name\" type=\"text\">\n</div>"
+        },
         {
             "name": "classes",
             "options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
index 2bce2545d..04be2fef1 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the input."
+        "required": false,
+        "description": "The ID of the input. Defaults to matching `name`."
     },
     {
         "name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
index 086a44a17..b039c1de1 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
@@ -4,7 +4,6 @@
         {
             "name": "default",
             "options": {
-                "id": "select-1",
                 "name": "select-1",
                 "label": {
                     "text": "Label text goes here"
diff --git a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
index 0665b9479..e49a0ce9c 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "ID for each select box."
+        "required": false,
+        "description": "ID for each select box. Defaults to matching `name`."
     },
     {
         "name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
index c8ee18c19..e79ebe9ba 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
@@ -39,7 +39,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n        Past day\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n        Past week\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n        Past month\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n        Past year\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"past-day\">\n    <h2 class=\"govuk-heading-l\">Past day</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">3</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">1</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">2</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n    <h2 class=\"govuk-heading-l\">Past week</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">18</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">16</td>\n          <td class=\"govuk-table__cell\">20</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">27</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n    <h2 class=\"govuk-heading-l\">Past month</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">98</td>\n          <td class=\"govuk-table__cell\">95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">122</td>\n          <td class=\"govuk-table__cell\">131</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">126</td>\n          <td class=\"govuk-table__cell\">142</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n    <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n        Past day\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n        Past week\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n        Past month\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n        Past year\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"past-day\">\n    <h2 class=\"govuk-heading-l\">Past day</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">3</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">1</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">2</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n    <h2 class=\"govuk-heading-l\">Past week</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">18</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">16</td>\n          <td class=\"govuk-table__cell\">20</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">27</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n    <h2 class=\"govuk-heading-l\">Past month</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">98</td>\n          <td class=\"govuk-table__cell\">95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">122</td>\n          <td class=\"govuk-table__cell\">131</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">126</td>\n          <td class=\"govuk-table__cell\">142</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n    <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n  </div>\n</div>"
         },
         {
             "name": "tabs-with-anchor-in-panel",
@@ -65,7 +65,7 @@
             "description": "Ensure that anchors that are in tab panels work correctly",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <h2 class=\"govuk-heading-l\">Tab 1</h2>\n    <p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n    <p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n    <p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <h2 class=\"govuk-heading-l\">Tab 1</h2>\n    <p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n    <p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n    <p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
         },
         {
             "name": "classes",
@@ -85,7 +85,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "id",
@@ -125,7 +125,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -147,7 +147,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "item with attributes",
@@ -170,7 +170,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "panel with attributes",
@@ -193,7 +193,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n    <p class=\"govuk-body\">Panel text</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n    <p class=\"govuk-body\">Panel text</p>\n  </div>\n</div>"
         },
         {
             "name": "no item list",
@@ -216,7 +216,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
         },
         {
             "name": "with falsy values",
@@ -245,7 +245,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "idPrefix",
@@ -270,7 +270,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "html as text",
@@ -296,7 +296,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n  </div>\n</div>"
         },
         {
             "name": "html",
@@ -322,7 +322,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p>Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p>Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p>Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p>Panel 2 content</p>\n  </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json b/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
index 122e19c85..6107b60dc 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
@@ -3,13 +3,13 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "This is used for the main component and to compose the ID attribute for each item."
+        "description": "This is used for the main component and to compose the ID attribute for each item. Default is `\"tabs\"`."
     },
     {
         "name": "idPrefix",
         "type": "string",
         "required": false,
-        "description": "Optional prefix. This is used to prefix the `id` attribute for each tab item and panel, separated by `-`."
+        "description": "Optional prefix. This is used to prefix the `id` attribute for each tab item and panel, separated by `-`. Defaults to matching `id`."
     },
     {
         "name": "title",
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
index 0a59278f5..98ed339fc 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
@@ -5,7 +5,6 @@
             "name": "default",
             "options": {
                 "name": "more-detail",
-                "id": "more-detail",
                 "label": {
                     "text": "Can you provide more detail?"
                 }
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
index 76d868acd..77dc436e7 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
@@ -2,8 +2,8 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
-        "description": "The ID of the textarea."
+        "required": false,
+        "description": "The ID of the textarea. Defaults to matching `name`."
     },
     {
         "name": "name",

Action run for f795005

If unset, the accordion uses the string "accordion" as the ID and prefix for child element IDs.

If unset, the character count uses the value of the `name` parameter as an ID and prefix for child element IDs.

If unset, the component will first use the value of the `namePrefix` parameter. If that is also unset, it will use the string “date-input”.

If unset, the component uses the `name` parameter value for the ID

If unset, the ID defaults to match the value of the `name` parameter

If `id` is unset, default to the string “tabs”. If `prefixId` is unset, default to match the `id`.

If unset, use the `name` parameter for the ID.

If unset, uses the `name` parameter for the component ID.

If `id` is unset, default to the string “tabs”. If `idPrefix` is unset, default to match the `id`.

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5171 July 24, 2024 16:03 Inactive

querkmachine changed the title ~~Define default id parameter values for various components~~ [WIP] Define default id parameter values for various components Jul 24, 2024

querkmachine self-assigned this Jul 24, 2024

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5171 July 29, 2024 15:08 Inactive

querkmachine added 10 commits December 6, 2024 11:18

Set default ID for accordion component

58a48bf

If unset, the accordion uses the string "accordion" as the ID and prefix for child element IDs.

Set default ID for character count component

838e66b

If unset, the character count uses the value of the `name` parameter as an ID and prefix for child element IDs.

Set default ID for date input component

b31c526

If unset, the component will first use the value of the `namePrefix` parameter. If that is also unset, it will use the string “date-input”.

Set default ID for file upload component

beed77f

If unset, the component uses the `name` parameter value for the ID

Set default ID for select component

e4e9d63

If unset, the ID defaults to match the value of the `name` parameter

Set default ID and prefix ID on Tabs component

745b52d

If `id` is unset, default to the string “tabs”. If `prefixId` is unset, default to match the `id`.

Set default ID for inputs

2382768

If unset, use the `name` parameter for the ID.

Set default ID for textarea component

5881c2b

If unset, uses the `name` parameter for the component ID.

Set default ID and prefix ID on Tabs component

b0c083b

If `id` is unset, default to the string “tabs”. If `idPrefix` is unset, default to match the `id`.

Update tests

f795005

querkmachine force-pushed the default-component-ids branch from fcb885e to f795005 Compare December 6, 2024 11:18

govuk-design-system-ci deployed to govuk-frontend-pr-5171 December 6, 2024 11:19 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Define default `id` parameter values for various components #5171

[WIP] Define default `id` parameter values for various components #5171

querkmachine commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

[WIP] Define default id parameter values for various components #5171

Are you sure you want to change the base?

[WIP] Define default id parameter values for various components #5171

Conversation

querkmachine commented Jul 24, 2024 • edited Loading

Changes

Components changed

Todo

Thoughts

github-actions bot commented Jul 24, 2024 • edited Loading

📋 Stats

File sizes

Modules

github-actions bot commented Jul 24, 2024 • edited Loading

Rendered HTML changes to npm package

github-actions bot commented Jul 24, 2024 • edited Loading

Other changes to npm package

[WIP] Define default `id` parameter values for various components #5171

[WIP] Define default `id` parameter values for various components #5171

querkmachine commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading