diff --git a/ui/components/input/_doc.scss b/ui/components/input/_doc.scss
index 38f800c52e..72f0129a69 100644
--- a/ui/components/input/_doc.scss
+++ b/ui/components/input/_doc.scss
@@ -29,6 +29,19 @@
*
* In some cases, the read-only field state is swapped and has no ` `. This is called `static` in the examples. In that case, don’t use a ``. This provides better accessibility for screen readers and keyboard navigators. Instead, use a `` with the `.slds-form-element__label` class. Instead of an ` `, use the `.slds-form-element__static` class inside the `.slds-form-element__control` wrapper.
*
+ * ##### Fixed Text
+ *
+ * When using the fixed text variants for prepending or appending symbols to inputs,
+ * please be sure to use `aria-labelledby` on the input, that points to the ids of the label,
+ * prepended text and appended text as a space separated list. The IDs must appear in that order:
+ * label, prepended, then appended.
+ *
+ * The reason we do this is to create a better association between the input and the supporting labels around it.
+ * By only using the traditional `label[for]` method, the fixed text is never read out in the context of editing
+ * the input value. With using the `aria-labelledby` attribute we can create a better label with all the
+ * visual labels associated with it, in a relevant order, that is read by assistive technology when the user
+ * needs it; when they're editing the value.
+ *
* @summary Text inputs are used for freeform data entry
*
* @base
diff --git a/ui/components/input/base/example.jsx b/ui/components/input/base/example.jsx
index 7b45e7b167..8baa1e0d95 100644
--- a/ui/components/input/base/example.jsx
+++ b/ui/components/input/base/example.jsx
@@ -23,6 +23,7 @@ export let FormElementLabel = props => (
{props.children}
@@ -274,12 +275,14 @@ export let examples = [
label: 'Fixed text',
element: (
- Input Label
+
+ Input Label
+
$
-
+
euro