From b64b552ea737edec0e8547b535bfec67245ccb2c Mon Sep 17 00:00:00 2001
From: Matyas Szabo <forianszm@gmail.com>
Date: Thu, 3 Oct 2024 15:01:45 +0200
Subject: [PATCH] docs(ui-form-field): fix example a11y

Closes: INSTUI-4255
---
 packages/ui-form-field/src/FormField/README.md | 4 ++--
 packages/ui-form-field/src/FormField/props.ts  | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui-form-field/src/FormField/README.md b/packages/ui-form-field/src/FormField/README.md
index 04a165ed11..96ee70b224 100644
--- a/packages/ui-form-field/src/FormField/README.md
+++ b/packages/ui-form-field/src/FormField/README.md
@@ -9,7 +9,7 @@ components. In most cases it shouldn't be used directly.
 ---
 type: example
 ---
-<FormField id="foo" label="Opacity" width="200px">
-  <input style={{display: 'block', width: '100%'}}/>
+<FormField id="_foo123" label="Opacity" width="200px">
+  <input style={{display: 'block', width: '100%'}} id="_foo123"/>
 </FormField>
 ```
diff --git a/packages/ui-form-field/src/FormField/props.ts b/packages/ui-form-field/src/FormField/props.ts
index 6155d91264..7dd1ea137f 100644
--- a/packages/ui-form-field/src/FormField/props.ts
+++ b/packages/ui-form-field/src/FormField/props.ts
@@ -36,7 +36,8 @@ import type { FormMessage } from '../FormPropTypes'
 type FormFieldOwnProps = {
   label: React.ReactNode
   /**
-   * the id of the input (to link it to its label for a11y)
+   * the id of the input (to link it to its label for a11y).
+   * Applied as the `for` HTML prop on the label.
    */
   id: string
   /**