feat: Input prefix suffix

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -17298,7 +17298,48 @@ with the input using \`ariaDescribedby\`.",
       "type": "boolean",
     },
   ],
-  "regions": [],
+  "regions": [
+    {
+      "description": "Content rendered in a shaded cell on the leading edge of the input field,
+before the editable value.
+
+Accepts any React node — plain text, a short symbol, an icon, or a badge.
+Use for contextual decorators such as currency symbols (\`$\`, \`€\`),
+URL schemes (\`https://\`), path prefixes (\`/api/v2/\`), or an icon that
+clarifies the expected data type.
+
+The adornment is purely decorative — it does not mutate the \`value\` prop
+or the \`onChange\` detail. Wrap any icon or custom element in
+\`aria-hidden="true"\` if it is already conveyed by the visible
+\`<FormField>\` label, so screen reader users are not double-announced.
+Ensure the unit or context is also reflected in the visible label
+(for example, label = "Amount in US dollars", not just "Amount").
+
+In RTL locales the \`prefix\` cell appears on the trailing edge.
+"prefix" means "before the value" semantically, not "on the left".
+
+Don't use \`prefix\` as a substitute for a visible label.",
+      "isDefault": false,
+      "name": "prefix",
+    },
+    {
+      "description": "Content rendered in a shaded cell on the trailing edge of the input field,
+after the editable value.
+
+Accepts any React node — plain text, a short unit abbreviation, an icon,
+or a badge. Use for units of measure (\`%\`, \`ms\`, \`TB/mo\`, \`GB\`, \`req/s\`,
+\`days\`), currency codes (\`USD\`, \`EUR\`), degree notation (\`°C\`, \`°E\`), or
+an icon indicating a secondary action.
+
+The adornment is purely decorative — it does not mutate the \`value\` prop
+or the \`onChange\` detail. Ensure the unit is also reflected in the visible
+\`<FormField>\` label (for example, label = "CPU utilization (percent)").
+
+In RTL locales the \`suffix\` cell appears on the leading edge.",
+      "isDefault": false,
+      "name": "suffix",
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;
@@ -35226,6 +35267,34 @@ Supported options:
             ],
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "inheritedFrom": {
             "name": "BaseInputWrapper.focus",
@@ -36880,6 +36949,23 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
             ],
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findPrefix",
+          },
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "name": "findStatusIndicator",
           "parameters": [
@@ -36903,6 +36989,23 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
             ],
           },
         },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findSuffix",
+          },
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "inheritedFrom": {
             "name": "BaseInputWrapper.focus",
@@ -43165,6 +43268,23 @@ and this method will have no effect.",
             ],
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findPrefix",
+          },
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "description": "Returns custom property form cancel button.",
           "name": "findPropertyCancelButton",
@@ -43256,6 +43376,23 @@ and this method will have no effect.",
             ],
           },
         },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findSuffix",
+          },
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "name": "findTokens",
           "parameters": [],
@@ -47245,6 +47382,24 @@ Supported options:
             "name": "ElementWrapper",
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
       ],
       "name": "InputWrapper",
     },
@@ -48381,6 +48536,18 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
             "name": "ElementWrapper",
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findPrefix",
+          },
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
         {
           "name": "findStatusIndicator",
           "parameters": [
@@ -48401,6 +48568,18 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
             "name": "ElementWrapper",
           },
         },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findSuffix",
+          },
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
       ],
       "name": "AutosuggestWrapper",
     },
@@ -52863,6 +53042,18 @@ In this case, use findContentEditableElement() instead.",
             "name": "ElementWrapper",
           },
         },
+        {
+          "description": "Returns the prefix adornment element, or null if no prefix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findPrefix",
+          },
+          "name": "findPrefix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
         {
           "description": "Returns custom property form cancel button.",
           "name": "findPropertyCancelButton",
@@ -52945,6 +53136,18 @@ In this case, use findContentEditableElement() instead.",
             "name": "ElementWrapper",
           },
         },
+        {
+          "description": "Returns the suffix adornment element, or null if no suffix is set.",
+          "inheritedFrom": {
+            "name": "InputWrapper.findSuffix",
+          },
+          "name": "findSuffix",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
         {
           "name": "findTokens",
           "parameters": [],

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -378,6 +378,8 @@ exports[`test-utils selectors 1`] = `
   "input": [
     "awsui_input-button-right_2rhyz",
     "awsui_input-container_2rhyz",
+    "awsui_input-prefix_2rhyz",
+    "awsui_input-suffix_2rhyz",
     "awsui_input_2rhyz",
     "awsui_root_2rhyz",
   ],

src/input/index.tsx

@@ -44,6 +44,8 @@ const Input = React.forwardRef(
       clearAriaLabel,
       nativeInputAttributes,
       style,
+      prefix,
+      suffix,
       ...rest
     }: InputProps,
     ref: Ref<InputProps.Ref>
@@ -101,6 +103,8 @@ const Input = React.forwardRef(
           clearAriaLabel,
           nativeInputAttributes,
           style,
+          prefix,
+          suffix,
         }}
         className={clsx(styles.root, baseProps.className)}
         __inheritFormFieldProps={true}

src/input/interfaces.ts

@@ -1,5 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
 import { BaseComponentProps } from '../types/base-component';
 import { BaseKeyDetail, CancelableEventHandler, NonCancelableEventHandler } from '../types/events';
 import { FormFieldValidationControlProps } from '../types/form-field';
@@ -188,6 +190,50 @@ export interface InputProps
    * @awsuiSystem core
    */
   style?: InputProps.Style;
+
+  /**
+   * Content rendered in a shaded cell on the leading edge of the input field,
+   * before the editable value.
+   *
+   * Accepts any React node — plain text, a short symbol, an icon, or a badge.
+   * Use for contextual decorators such as currency symbols (`$`, `€`),
+   * URL schemes (`https://`), path prefixes (`/api/v2/`), or an icon that
+   * clarifies the expected data type.
+   *
+   * The adornment is purely decorative — it does not mutate the `value` prop
+   * or the `onChange` detail. Wrap any icon or custom element in
+   * `aria-hidden="true"` if it is already conveyed by the visible
+   * `<FormField>` label, so screen reader users are not double-announced.
+   * Ensure the unit or context is also reflected in the visible label
+   * (for example, label = "Amount in US dollars", not just "Amount").
+   *
+   * In RTL locales the `prefix` cell appears on the trailing edge.
+   * "prefix" means "before the value" semantically, not "on the left".
+   *
+   * Don't use `prefix` as a substitute for a visible label.
+   *
+   * @see suffix
+   */
+  prefix?: React.ReactNode;
+
+  /**
+   * Content rendered in a shaded cell on the trailing edge of the input field,
+   * after the editable value.
+   *
+   * Accepts any React node — plain text, a short unit abbreviation, an icon,
+   * or a badge. Use for units of measure (`%`, `ms`, `TB/mo`, `GB`, `req/s`,
+   * `days`), currency codes (`USD`, `EUR`), degree notation (`°C`, `°E`), or
+   * an icon indicating a secondary action.
+   *
+   * The adornment is purely decorative — it does not mutate the `value` prop
+   * or the `onChange` detail. Ensure the unit is also reflected in the visible
+   * `<FormField>` label (for example, label = "CPU utilization (percent)").
+   *
+   * In RTL locales the `suffix` cell appears on the leading edge.
+   *
+   * @see prefix
+   */
+  suffix?: React.ReactNode;
 }
 
 export namespace InputProps {