diff --git a/.vscode/settings.json b/.vscode/settings.json
index 085ac31bb4..b278e37d78 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
"editor.formatOnSave": true,
"editor.trimAutoWhitespace": true,
"editor.tabSize": 2,
- "files.trimTrailingWhitespace": true
+ "files.trimTrailingWhitespace": true,
+ "angular.enable-strict-mode-prompt": false
}
\ No newline at end of file
diff --git a/docs/public/images/examples/limit-the-width-of-helper-text.webp b/docs/public/images/examples/limit-the-width-of-helper-text.webp
new file mode 100644
index 0000000000..9ef16695bf
Binary files /dev/null and b/docs/public/images/examples/limit-the-width-of-helper-text.webp differ
diff --git a/docs/public/search-index.json b/docs/public/search-index.json
index 02e07124ab..a2ed79243c 100644
--- a/docs/public/search-index.json
+++ b/docs/public/search-index.json
@@ -1511,6 +1511,27 @@
"aliases": [],
"slug": "include-descriptions-for-items-in-a-checkbox-list"
},
+ {
+ "type": "example",
+ "id": "limit-the-width-of-helper-text",
+ "title": "Limit the width of helper text",
+ "description": "Use the Text component in the Form item help text slot to limit the line length of helper text.",
+ "status": "published",
+ "size": "interaction",
+ "tags": [
+ "form",
+ "form-item",
+ "helper-text",
+ "text"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "text"
+ ],
+ "aliases": [],
+ "slug": "limit-the-width-of-helper-text"
+ },
{
"type": "example",
"id": "link-the-user-to-give-feedback-to-the-service",
diff --git a/docs/src/content/examples/limit-the-width-of-helper-text/angular.html b/docs/src/content/examples/limit-the-width-of-helper-text/angular.html
new file mode 100644
index 0000000000..4d527df40f
--- /dev/null
+++ b/docs/src/content/examples/limit-the-width-of-helper-text/angular.html
@@ -0,0 +1,9 @@
+
+
+
+
+ Enter your full legal name exactly as it appears on your government-issued
+ identification.
+
+
+
diff --git a/docs/src/content/examples/limit-the-width-of-helper-text/angular.ts b/docs/src/content/examples/limit-the-width-of-helper-text/angular.ts
new file mode 100644
index 0000000000..454d1f1df8
--- /dev/null
+++ b/docs/src/content/examples/limit-the-width-of-helper-text/angular.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+
+@Component({
+ selector: "app-limit-the-width-of-helper-text",
+ templateUrl: "./angular.html",
+})
+export class LimitTheWidthOfHelperTextComponent {
+ form: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.form = this.fb.group({
+ legalName: [""],
+ });
+ }
+}
diff --git a/docs/src/content/examples/limit-the-width-of-helper-text/index.mdx b/docs/src/content/examples/limit-the-width-of-helper-text/index.mdx
new file mode 100644
index 0000000000..4f9d8cb1af
--- /dev/null
+++ b/docs/src/content/examples/limit-the-width-of-helper-text/index.mdx
@@ -0,0 +1,29 @@
+---
+id: limit-the-width-of-helper-text
+title: Limit the width of helper text
+size: interaction
+tags:
+ - form
+ - form-item
+ - helper-text
+ - text
+components:
+ - form-item
+ - input
+ - text
+status: published
+previewImage: /images/examples/limit-the-width-of-helper-text.webp
+---
+
+Use the Text component in the Form item help text slot to limit the line length of helper text.
+
+## When to use
+
+Use this pattern when longer helper text stretches too far across the page and becomes difficult to read.
+
+## Considerations
+
+- Set the Text component's `maxWidth` property with a valid CSS width, such as `40ch`
+- Use a character-based width such as `ch` to keep lines at a readable length
+- Keep helper text concise and relevant to the field
+- Make sure the helper text remains available to assistive technologies through the Form item help text slot
diff --git a/docs/src/content/examples/limit-the-width-of-helper-text/react.tsx b/docs/src/content/examples/limit-the-width-of-helper-text/react.tsx
new file mode 100644
index 0000000000..8b8a046cff
--- /dev/null
+++ b/docs/src/content/examples/limit-the-width-of-helper-text/react.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { GoabFormItem, GoabInput, GoabText } from "@abgov/react-components";
+import type { GoabInputOnChangeDetail } from "@abgov/ui-components-common";
+
+export function LimitTheWidthOfHelperText() {
+ const [value, setValue] = useState("");
+
+ const helpText = (
+
+ Enter your full legal name exactly as it appears on your government-issued
+ identification.
+
+ );
+
+ return (
+
+ setValue(detail.value)}
+ />
+
+ );
+}
diff --git a/docs/src/content/examples/limit-the-width-of-helper-text/web-components.html b/docs/src/content/examples/limit-the-width-of-helper-text/web-components.html
new file mode 100644
index 0000000000..b870b10c96
--- /dev/null
+++ b/docs/src/content/examples/limit-the-width-of-helper-text/web-components.html
@@ -0,0 +1,7 @@
+
+
+
+ Enter your full legal name exactly as it appears on your government-issued
+ identification.
+
+