[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 correctly. Some components provide default id values if one isn't specified, whereas other components don't.

This discrepancy has led to instances of developers forgetting to set ids and for implementations and wrappers of govuk-frontend to implement their own means of setting (or not setting) default ids.

We already do this for the Checkboxes and Radios components ourselves by setting the idPrefix to match the name parameter by default.

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.

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.

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

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.52 KiB
dist/govuk-frontend-development.min.js	41.83 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.33 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.03 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.51 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.82 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.16 KiB	39.79 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.05 KiB	6.06 KiB

View stats and visualisations on the review app

Action run for fcb885e

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 fcb885e

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 6a1fec053..5c2fb8768 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 afa2fc013..2b437a106 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 5db62cb10..ebb7ac63a 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 c76a2c90f..4aa3ca050 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 cfe637803..6e558bc15 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 fcb885e

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

querkmachine added 8 commits July 24, 2024 15:44

Set default ID for accordion component

59769c0

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

Set default ID for character count component

65316b8

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

dbea025

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

25dabac

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

Set default ID for select component

a86a51a

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

Set default ID and prefix ID on Tabs component

4aa2b9c

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

Set default ID for inputs

1620a1a

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

Set default ID for textarea component

3c1a6ca

If unset, uses the `name` parameter for the component 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

querkmachine added 2 commits July 29, 2024 15:39

Set default ID and prefix ID on Tabs component

5a90762

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

Update tests

fcb885e

govuk-design-system-ci deployed to govuk-frontend-pr-5171 July 29, 2024 15:08 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

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

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

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