docs(ui-form-field): fix example a11y

Closes: INSTUI-4255
instructure · Oct 10, 2024 · 488202c · 488202c
1 parent 2160fdd
commit 488202c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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
   /**