From 70416c788fe00af904165a3a1181b024ea515441 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 16 Jun 2025 23:41:50 +0100
Subject: [PATCH] Add more examples for custom fields

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/FieldLabel/FieldLabel.tsx  |  6 +++---
 .../canon/src/components/FieldLabel/types.ts  |  9 ++++++++-
 .../TextField/TextField.stories.tsx           | 19 +++++++++++++++++++
 .../src/components/TextField/TextField.tsx    |  4 +++-
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/canon/src/components/FieldLabel/FieldLabel.tsx b/packages/canon/src/components/FieldLabel/FieldLabel.tsx
index 03db922279..8fee7dffed 100644
--- a/packages/canon/src/components/FieldLabel/FieldLabel.tsx
+++ b/packages/canon/src/components/FieldLabel/FieldLabel.tsx
@@ -20,14 +20,14 @@ import type { FieldLabelProps } from './types';
 /** @public */
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
   (props: FieldLabelProps, ref) => {
-    const { label, secondaryLabel, description } = props;
+    const { label, secondaryLabel, description, htmlFor, id, ...rest } = props;
 
     if (!label) return null;
 
     return (
-      <div className="canon-FieldLabel" ref={ref}>
+      <div className="canon-FieldLabel" {...rest} ref={ref}>
         {label && (
-          <Label className="canon-FieldLabelLabel">
+          <Label className="canon-FieldLabelLabel" htmlFor={htmlFor} id={id}>
             {label}
             {secondaryLabel && (
               <span
diff --git a/packages/canon/src/components/FieldLabel/types.ts b/packages/canon/src/components/FieldLabel/types.ts
index 41c6f390d5..38244f6fa8 100644
--- a/packages/canon/src/components/FieldLabel/types.ts
+++ b/packages/canon/src/components/FieldLabel/types.ts
@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+import type { HTMLAttributes } from 'react';
+
 /** @public */
-export interface FieldLabelProps {
+export interface FieldLabelProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The label of the text field
    */
@@ -30,4 +32,9 @@ export interface FieldLabelProps {
    * The description of the text field
    */
   description?: string | null;
+
+  /**
+   * The HTML for attribute of the text field
+   */
+  htmlFor?: string;
 }
diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx
index 17097e993c..e07aa6ea05 100644
--- a/packages/canon/src/components/TextField/TextField.stories.tsx
+++ b/packages/canon/src/components/TextField/TextField.stories.tsx
@@ -19,6 +19,7 @@ import { TextField } from './TextField';
 import { Form } from 'react-aria-components';
 import { Icon } from '../Icon';
 import { Flex } from '../Flex';
+import { FieldLabel } from '../FieldLabel';
 
 const meta = {
   title: 'Forms/TextField',
@@ -125,3 +126,21 @@ export const Validation: Story = {
     validate: value => (value === 'admin' ? 'Nice try!' : null),
   },
 };
+
+export const CustomField: Story = {
+  render: () => (
+    <>
+      <FieldLabel
+        htmlFor="custom-field"
+        id="custom-field-label"
+        label="Custom Field"
+      />
+      <TextField
+        id="custom-field"
+        aria-labelledby="custom-field-label"
+        name="custom-field"
+        defaultValue="Custom Field"
+      />
+    </>
+  ),
+};
diff --git a/packages/canon/src/components/TextField/TextField.tsx b/packages/canon/src/components/TextField/TextField.tsx
index bab47c6434..88a80042ee 100644
--- a/packages/canon/src/components/TextField/TextField.tsx
+++ b/packages/canon/src/components/TextField/TextField.tsx
@@ -45,7 +45,7 @@ export const TextField = forwardRef<HTMLDivElement, FormInputProps>(
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
         console.warn(
-          'If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility',
+          'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',
         );
       }
     }, [label, ariaLabel, ariaLabelledBy]);
@@ -61,6 +61,8 @@ export const TextField = forwardRef<HTMLDivElement, FormInputProps>(
       <AriaTextField
         className={clsx('canon-TextField', className)}
         data-size={responsiveSize}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
         {...rest}
         ref={ref}
       >