From 55697a0c6a0218b146efdc906afe9d360af7dea7 Mon Sep 17 00:00:00 2001
From: Nathnael Dereje <natidere@amazon.de>
Date: Tue, 21 Jul 2026 20:44:27 +0200
Subject: [PATCH 1/3] feat: Input prefix suffix

---
 pages/input/adornments.page.tsx               | 336 ++++++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     | 198 +++++++++++
 .../test-utils-selectors.test.tsx.snap        |   2 +
 src/input/index.tsx                           |   4 +
 src/input/interfaces.ts                       |  38 ++
 src/input/internal.tsx                        |  66 +++-
 src/input/styles.scss                         | 121 +++++++
 src/test-utils/dom/input/index.ts             |  20 ++
 8 files changed, 771 insertions(+), 14 deletions(-)
 create mode 100644 pages/input/adornments.page.tsx

diff --git a/pages/input/adornments.page.tsx b/pages/input/adornments.page.tsx
new file mode 100644
index 0000000000..c458e83d15
--- /dev/null
+++ b/pages/input/adornments.page.tsx
@@ -0,0 +1,336 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Badge from '~components/badge';
+import Box from '~components/box';
+import ColumnLayout from '~components/column-layout';
+import Container from '~components/container';
+import ContentLayout from '~components/content-layout';
+import FormField from '~components/form-field';
+import Header from '~components/header';
+import Input from '~components/input';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+// ─── State controls panel ─────────────────────────────────────────────────────
+
+interface StateControlsProps {
+  disabled: boolean;
+  setDisabled: (v: boolean) => void;
+  readOnly: boolean;
+  setReadOnly: (v: boolean) => void;
+  invalid: boolean;
+  setInvalid: (v: boolean) => void;
+  warning: boolean;
+  setWarning: (v: boolean) => void;
+  compact: boolean;
+  setCompact: (v: boolean) => void;
+  rtl: boolean;
+  setRtl: (v: boolean) => void;
+}
+
+function StateControls({
+  disabled,
+  setDisabled,
+  readOnly,
+  setReadOnly,
+  invalid,
+  setInvalid,
+  warning,
+  setWarning,
+  compact,
+  setCompact,
+  rtl,
+  setRtl,
+}: StateControlsProps) {
+  return (
+    <Container header={<Header variant="h2">State controls</Header>}>
+      <ColumnLayout columns={3} borders="vertical">
+        <SpaceBetween size="s">
+          <Toggle checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            Disabled
+          </Toggle>
+          <Toggle checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            Read-only
+          </Toggle>
+        </SpaceBetween>
+        <SpaceBetween size="s">
+          <Toggle checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            Invalid
+          </Toggle>
+          <Toggle checked={warning} onChange={({ detail }) => setWarning(detail.checked)}>
+            Warning
+          </Toggle>
+        </SpaceBetween>
+        <SpaceBetween size="s">
+          <Toggle checked={compact} onChange={({ detail }) => setCompact(detail.checked)}>
+            Compact density
+          </Toggle>
+          <Toggle checked={rtl} onChange={({ detail }) => setRtl(detail.checked)}>
+            RTL layout
+          </Toggle>
+        </SpaceBetween>
+      </ColumnLayout>
+    </Container>
+  );
+}
+
+// ─── Format hint examples ─────────────────────────────────────────────────────
+
+interface FormatHintProps {
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  warning: boolean;
+}
+
+function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+  const [currency, setCurrency] = useState('');
+  const [percent, setPercent] = useState('');
+  const [compound, setCompound] = useState('');
+  const [url, setUrl] = useState('');
+  const [both, setBoth] = useState('');
+  const [ms, setMs] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="Purely visual. Not submitted with the form value. Screen readers do not announce the adornment — the FormField label carries the unit."
+        >
+          Format hint adornments
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="blue">Decorative</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField
+            label="Spending limit (USD)"
+            errorText={invalid ? 'Enter a valid amount.' : undefined}
+            warningText={warning && !invalid ? 'Value may exceed your budget.' : undefined}
+          >
+            <Input
+              value={currency}
+              onChange={e => setCurrency(e.detail.value)}
+              prefix="$"
+              inputMode="decimal"
+              placeholder="0.00"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="CPU utilization (percent)"
+            errorText={invalid ? 'Enter a value between 0 and 100.' : undefined}
+            warningText={warning && !invalid ? 'Utilization is high.' : undefined}
+          >
+            <Input
+              value={percent}
+              onChange={e => setPercent(e.detail.value)}
+              suffix="%"
+              inputMode="numeric"
+              placeholder="0"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Data transfer limit" errorText={invalid ? 'Enter a valid limit.' : undefined}>
+            <Input
+              value={compound}
+              onChange={e => setCompound(e.detail.value)}
+              suffix="TB/mo"
+              inputMode="numeric"
+              placeholder="0"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Response time threshold" errorText={invalid ? 'Enter a valid threshold.' : undefined}>
+            <Input
+              value={ms}
+              onChange={e => setMs(e.detail.value)}
+              suffix="ms"
+              inputMode="numeric"
+              placeholder="0"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Webhook endpoint URL" errorText={invalid ? 'Enter a valid URL.' : undefined}>
+            <Input
+              value={url}
+              onChange={e => setUrl(e.detail.value)}
+              prefix="https://"
+              type="url"
+              placeholder="example.com/webhook"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="Error rate threshold"
+            description="Alert when error rate exceeds this value."
+            errorText={invalid ? 'Enter a valid threshold.' : undefined}
+          >
+            <Input
+              value={both}
+              onChange={e => setBoth(e.detail.value)}
+              prefix="<"
+              suffix="%"
+              inputMode="decimal"
+              placeholder="0.5"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
+// ─── Baseline comparison ──────────────────────────────────────────────────────
+
+function BaselineComparison({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+  const [value, setValue] = useState('');
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="Standard Cloudscape Input with no adornment. Use this as a visual reference to confirm the adorned variant matches the baseline styling."
+        >
+          Baseline: plain Input
+        </Header>
+      }
+    >
+      <FormField label="Plain input (no adornment)">
+        <Input
+          value={value}
+          onChange={e => setValue(e.detail.value)}
+          placeholder="Enter a value"
+          disabled={disabled}
+          readOnly={readOnly}
+          invalid={invalid}
+          warning={warning}
+        />
+      </FormField>
+    </Container>
+  );
+}
+
+// ─── RTL section ──────────────────────────────────────────────────────────────
+
+function RtlSection() {
+  const [val, setVal] = useState('');
+  const [val2, setVal2] = useState('');
+  return (
+    <Container header={<Header variant="h2">RTL layout</Header>}>
+      <Box variant="p" color="text-body-secondary">
+        In RTL locales,{' '}
+        <Box variant="code" display="inline">
+          prefix
+        </Box>{' '}
+        appears on the trailing edge and{' '}
+        <Box variant="code" display="inline">
+          suffix
+        </Box>{' '}
+        appears on the leading edge. The prop names are semantic (before/after the value), not directional.
+      </Box>
+      <Box margin={{ top: 'm' }}>
+        <div dir="rtl">
+          <ColumnLayout columns={2}>
+            <FormField label="مبلغ (دولار أمريكي)">
+              <Input
+                value={val}
+                onChange={e => setVal(e.detail.value)}
+                prefix="$"
+                inputMode="decimal"
+                placeholder="0.00"
+              />
+            </FormField>
+            <FormField label="نسبة الاستخدام (بالمئة)">
+              <Input
+                value={val2}
+                onChange={e => setVal2(e.detail.value)}
+                suffix="%"
+                inputMode="numeric"
+                placeholder="0"
+              />
+            </FormField>
+          </ColumnLayout>
+        </div>
+      </Box>
+    </Container>
+  );
+}
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+
+export default function AdornmentsPage() {
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [compact, setCompact] = useState(false);
+  const [rtl, setRtl] = useState(false);
+
+  const stateProps = { disabled, readOnly, invalid, warning };
+
+  return (
+    <div className={compact ? 'awsui-compact-mode' : ''} dir={rtl ? 'rtl' : 'ltr'}>
+      <ContentLayout
+        header={
+          <Header
+            variant="h1"
+            description="New prefix and suffix props on the Input component. Format hints are decorative and do not affect the submitted value. Mandatory prefixes are semantic and are included in the submitted value."
+          >
+            Input — prefix/suffix adornments
+          </Header>
+        }
+      >
+        <SpaceBetween size="l">
+          <StateControls
+            disabled={disabled}
+            setDisabled={setDisabled}
+            readOnly={readOnly}
+            setReadOnly={setReadOnly}
+            invalid={invalid}
+            setInvalid={setInvalid}
+            warning={warning}
+            setWarning={setWarning}
+            compact={compact}
+            setCompact={setCompact}
+            rtl={rtl}
+            setRtl={setRtl}
+          />
+          <FormatHintExamples {...stateProps} />
+          <BaselineComparison {...stateProps} />
+          <RtlSection />
+        </SpaceBetween>
+      </ContentLayout>
+    </div>
+  );
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index d835dc74ff..25122ba54e 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -16986,6 +16986,26 @@ We do not support using this attribute to apply custom styling.",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Short text or symbol rendered in a shaded cell on the leading edge of the
+input field, before the editable value.
+
+Use for contextual decorators such as currency symbols (\`$\`, \`€\`),
+URL schemes (\`https://\`), or path prefixes (\`/api/v2/\`).
+
+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 so screen reader users receive the same context
+(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.",
+      "name": "prefix",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Specifies if the control is read-only, which prevents the
 user from modifying the value but includes it in a form
@@ -17257,6 +17277,22 @@ Refer to the [style](/components/input/?tabId=style) tab for more details.",
       ],
       "type": "InputProps.Style",
     },
+    {
+      "description": "Short text or symbol rendered in a shaded cell on the trailing edge of
+the input field, after the editable value.
+
+Use for units of measure (\`%\`, \`ms\`, \`TB/mo\`, \`GB\`, \`req/s\`, \`days\`),
+currency codes (\`USD\`, \`EUR\`), or degree notation (\`°C\`, \`°E\`).
+
+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.",
+      "name": "suffix",
+      "optional": true,
+      "type": "string",
+    },
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of control to render.
@@ -35226,6 +35262,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 +36944,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 +36984,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 +43263,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 +43371,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 +47377,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 +48531,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 +48563,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 +53037,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 +53131,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": [],
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index 4b1af42bc5..ed248e6f53 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/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",
   ],
diff --git a/src/input/index.tsx b/src/input/index.tsx
index 351bdf14af..f194cff2a6 100644
--- a/src/input/index.tsx
+++ b/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}
diff --git a/src/input/interfaces.ts b/src/input/interfaces.ts
index 86a9cbeffd..81fa01436c 100644
--- a/src/input/interfaces.ts
+++ b/src/input/interfaces.ts
@@ -188,6 +188,44 @@ export interface InputProps
    * @awsuiSystem core
    */
   style?: InputProps.Style;
+
+  /**
+   * Short text or symbol rendered in a shaded cell on the leading edge of the
+   * input field, before the editable value.
+   *
+   * Use for contextual decorators such as currency symbols (`$`, `€`),
+   * URL schemes (`https://`), or path prefixes (`/api/v2/`).
+   *
+   * 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 so screen reader users receive the same context
+   * (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?: string;
+
+  /**
+   * Short text or symbol rendered in a shaded cell on the trailing edge of
+   * the input field, after the editable value.
+   *
+   * Use for units of measure (`%`, `ms`, `TB/mo`, `GB`, `req/s`, `days`),
+   * currency codes (`USD`, `EUR`), or degree notation (`°C`, `°E`).
+   *
+   * 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?: string;
 }
 
 export namespace InputProps {
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
index 7dad564dbe..d01716d329 100644
--- a/src/input/internal.tsx
+++ b/src/input/internal.tsx
@@ -57,6 +57,9 @@ export interface InternalInputProps
   __skipNativeAttributesWarnings?: SkipWarnings;
   __inlineLabelText?: string;
   __fullWidth?: boolean;
+
+  prefix?: string;
+  suffix?: string;
 }
 
 function InternalInput(
@@ -101,6 +104,8 @@ function InternalInput(
     __inlineLabelText,
     __fullWidth,
     style,
+    prefix,
+    suffix,
     ...rest
   }: InternalInputProps,
   ref: Ref<HTMLInputElement>
@@ -142,6 +147,7 @@ function InternalInput(
       __rightIcon && styles['input-has-icon-right'],
       __leftIcon && styles['input-has-icon-left'],
       __noBorderRadius && styles['input-has-no-border-radius'],
+      (prefix !== undefined || suffix !== undefined) && styles['input-adorned'],
       {
         [styles['input-readonly']]: readOnly,
         [styles['input-invalid']]: invalid,
@@ -215,6 +221,25 @@ function InternalInput(
     />
   );
 
+  // The input element, optionally wrapped in an inline-label structure.
+  const inputWithLabel = __inlineLabelText ? (
+    <div className={clsx(styles['inline-label-wrapper'], __fullWidth && styles['inline-label-wrapper-full-width'])}>
+      <label htmlFor={controlId} className={styles['inline-label']}>
+        {__inlineLabelText}
+      </label>
+      <div
+        className={clsx(
+          styles['inline-label-trigger-wrapper'],
+          __fullWidth && styles['inline-label-trigger-wrapper-full-width']
+        )}
+      >
+        {mainInput}
+      </div>
+    </div>
+  ) : (
+    mainInput
+  );
+
   return (
     <div
       {...baseProps}
@@ -230,22 +255,35 @@ function InternalInput(
           <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />
         </span>
       )}
-      {__inlineLabelText ? (
-        <div className={clsx(styles['inline-label-wrapper'], __fullWidth && styles['inline-label-wrapper-full-width'])}>
-          <label htmlFor={controlId} className={styles['inline-label']}>
-            {__inlineLabelText}
-          </label>
-          <div
-            className={clsx(
-              styles['inline-label-trigger-wrapper'],
-              __fullWidth && styles['inline-label-trigger-wrapper-full-width']
-            )}
-          >
-            {mainInput}
-          </div>
+      {prefix !== undefined || suffix !== undefined ? (
+        // One flex bar owns the border, radius, background, and focus ring.
+        // Layout: [prefix][divider][input][divider][suffix]
+        // Dividers only render on sides that have an adornment.
+        <div
+          className={clsx(
+            styles['input-adorned-container'],
+            invalid && styles['input-adorned-container-invalid'],
+            warning && !invalid && styles['input-adorned-container-warning'],
+            disabled && styles['input-adorned-container-disabled'],
+            readOnly && !disabled && styles['input-adorned-container-readonly']
+          )}
+        >
+          {prefix !== undefined && (
+            <span className={styles['input-prefix']} aria-hidden="true">
+              {prefix}
+            </span>
+          )}
+          {prefix !== undefined && <span className={styles['input-adornment-divider']} />}
+          {inputWithLabel}
+          {suffix !== undefined && <span className={styles['input-adornment-divider']} />}
+          {suffix !== undefined && (
+            <span className={styles['input-suffix']} aria-hidden="true">
+              {suffix}
+            </span>
+          )}
         </div>
       ) : (
-        mainInput
+        inputWithLabel
       )}
       {__rightIcon && (
         <span
diff --git a/src/input/styles.scss b/src/input/styles.scss
index 4cf24e0338..0a4b27ff09 100644
--- a/src/input/styles.scss
+++ b/src/input/styles.scss
@@ -224,3 +224,124 @@
 .inline-label {
   @include forms.inline-label;
 }
+
+// Adornment wrapper — owns border, radius, background, and focus ring
+// when prefix or suffix is present. Laid out as a single flex bar:
+// [prefix][divider][input][divider][suffix]
+.input-adorned-container {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  box-sizing: border-box;
+  background-color: awsui.$color-background-input-default;
+  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
+  border-start-start-radius: styles.$control-border-radius;
+  border-start-end-radius: styles.$control-border-radius;
+  border-end-start-radius: styles.$control-border-radius;
+  border-end-end-radius: styles.$control-border-radius;
+  min-block-size: awsui.$size-vertical-input;
+
+  &:focus-within {
+    @include styles.form-focus-element(
+      $border-color: awsui.$color-border-input-focused,
+      $box-shadow: foundation.$box-shadow-focused-light
+    );
+  }
+
+  &.input-adorned-container-invalid {
+    @include styles.form-invalid-control(
+      $color: awsui.$color-text-status-error,
+      $border-color: awsui.$color-text-status-error,
+      $focus-box-shadow: foundation.$box-shadow-focused-light-invalid
+    );
+  }
+
+  &.input-adorned-container-warning {
+    @include styles.form-warning-control(
+      $color: awsui.$color-text-status-warning,
+      $border-color: awsui.$color-text-status-warning,
+      $focus-box-shadow: foundation.$box-shadow-focused-light-invalid
+    );
+  }
+
+  &.input-adorned-container-disabled {
+    background-color: awsui.$color-background-input-disabled;
+    border-color: awsui.$color-border-input-disabled;
+    color: awsui.$color-text-input-disabled;
+    cursor: default;
+  }
+
+  &.input-adorned-container-readonly {
+    @include styles.form-readonly-element(
+      $background-color: awsui.$color-background-input-default,
+      $border-color: awsui.$color-border-input-disabled
+    );
+  }
+}
+
+// Adornment cell — no border, no background (inherits from wrapper)
+.input-prefix,
+.input-suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
+  color: awsui.$color-text-form-secondary;
+  white-space: nowrap;
+  user-select: none;
+  cursor: default;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  @include styles.font-body-m;
+}
+
+// 1px divider — only rendered when an adornment is present on that side
+.input-adornment-divider {
+  display: block;
+  flex-shrink: 0;
+  inline-size: awsui.$border-width-field;
+  background-color: awsui.$color-border-divider-default;
+  align-self: stretch;
+}
+
+// Strip the native input's own border/radius/background when inside the adornment wrapper.
+// The .input-adorned modifier is applied to the input element by InternalInput when prefix or suffix is set.
+.input-adorned {
+  flex: 1;
+  min-inline-size: 0;
+  border-block: none;
+  border-inline: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  min-block-size: unset;
+
+  &:focus {
+    border-block: none;
+    border-inline: none;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &.input-readonly {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
diff --git a/src/test-utils/dom/input/index.ts b/src/test-utils/dom/input/index.ts
index 07afab1659..e2cda1a1a1 100644
--- a/src/test-utils/dom/input/index.ts
+++ b/src/test-utils/dom/input/index.ts
@@ -12,4 +12,24 @@ export default class InputWrapper extends BaseInputWrapper {
   findClearButton(): ElementWrapper | null {
     return this.find(`.${inputSelectors['input-button-right']}`);
   }
+
+  /**
+   * Returns the prefix adornment element, or null if no prefix is set.
+   * @example
+   * expect(wrapper.findPrefix()?.getElement().textContent).toBe('$');
+   * @see {@link findSuffix}
+   */
+  findPrefix(): ElementWrapper | null {
+    return this.find(`.${inputSelectors['input-prefix']}`);
+  }
+
+  /**
+   * Returns the suffix adornment element, or null if no suffix is set.
+   * @example
+   * expect(wrapper.findSuffix()?.getElement().textContent).toBe('%');
+   * @see {@link findPrefix}
+   */
+  findSuffix(): ElementWrapper | null {
+    return this.find(`.${inputSelectors['input-suffix']}`);
+  }
 }

From a70b5640977089b79ae4c5af71c58fbd5600f8da Mon Sep 17 00:00:00 2001
From: Nathnael Dereje <natidere@amazon.de>
Date: Wed, 22 Jul 2026 10:14:25 +0200
Subject: [PATCH 2/3] chore: Split required prefix/suffix into its own dev-page
 section

Move the ambiguous https:// example out of the decorative section and add a
clearly-labeled required prefix/suffix section demonstrating the userland
concatenation pattern (webhook, S3 bucket, private DNS suffix). Clarifies that
prefix/suffix are decorative only and the builder concatenates the value.
---
 pages/input/adornments.page.tsx | 136 +++++++++++++++++++++++++++-----
 1 file changed, 118 insertions(+), 18 deletions(-)

diff --git a/pages/input/adornments.page.tsx b/pages/input/adornments.page.tsx
index c458e83d15..13b81e0dcc 100644
--- a/pages/input/adornments.page.tsx
+++ b/pages/input/adornments.page.tsx
@@ -89,7 +89,6 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
   const [currency, setCurrency] = useState('');
   const [percent, setPercent] = useState('');
   const [compound, setCompound] = useState('');
-  const [url, setUrl] = useState('');
   const [both, setBoth] = useState('');
   const [ms, setMs] = useState('');
 
@@ -98,7 +97,7 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
       header={
         <Header
           variant="h2"
-          description="Purely visual. Not submitted with the form value. Screen readers do not announce the adornment — the FormField label carries the unit."
+          description="Purely visual. Not submitted with the form value. Screen readers do not announce the adornment. The FormField label carries the unit."
         >
           Format hint adornments
           <Box display="inline-block" margin={{ left: 'xs' }}>
@@ -173,20 +172,6 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
             />
           </FormField>
 
-          <FormField label="Webhook endpoint URL" errorText={invalid ? 'Enter a valid URL.' : undefined}>
-            <Input
-              value={url}
-              onChange={e => setUrl(e.detail.value)}
-              prefix="https://"
-              type="url"
-              placeholder="example.com/webhook"
-              disabled={disabled}
-              readOnly={readOnly}
-              invalid={invalid}
-              warning={warning}
-            />
-          </FormField>
-
           <FormField
             label="Error rate threshold"
             description="Alert when error rate exceeds this value."
@@ -211,6 +196,120 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
   );
 }
 
+// ─── Required prefix/suffix (userland concatenation) ──────────────────────────
+// These examples answer the "mandatory prefix/suffix" use-case. The component
+// does NOT do this. The `prefix`/`suffix` props are always decorative and never
+// mutate `onChange`. The fixed segment is shown visually with the decorative prop,
+// and the builder concatenates it into the value in application code.
+
+function RequiredAffixExamples({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+  const [url, setUrl] = useState('');
+  const [bucket, setBucket] = useState('');
+  const [host, setHost] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="The fixed segment is decorative. The builder concatenates it into the submitted value. The component does not do this automatically."
+        >
+          Required prefix/suffix
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="grey">Builder concatenates</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField
+            label="Webhook endpoint URL"
+            constraintText="The https:// scheme is added automatically."
+            errorText={invalid ? 'Enter a valid URL.' : undefined}
+          >
+            <SpaceBetween size="xs">
+              <Input
+                value={url}
+                onChange={e => setUrl(e.detail.value)}
+                prefix="https://"
+                type="url"
+                placeholder="example.com/webhook"
+                disabled={disabled}
+                readOnly={readOnly}
+                invalid={invalid}
+                warning={warning}
+              />
+              {url && (
+                <Box variant="small" color="text-body-secondary">
+                  Submitted value:{' '}
+                  <Box variant="code" display="inline">
+                    https://{url}
+                  </Box>
+                </Box>
+              )}
+            </SpaceBetween>
+          </FormField>
+
+          <FormField
+            label="S3 bucket name"
+            constraintText="The amazon-braket- prefix is required and included in the resource name."
+            errorText={invalid ? 'Enter a valid bucket name.' : undefined}
+          >
+            <SpaceBetween size="xs">
+              <Input
+                value={bucket}
+                onChange={e => setBucket(e.detail.value)}
+                prefix="amazon-braket-"
+                placeholder="my-bucket"
+                disabled={disabled}
+                readOnly={readOnly}
+                invalid={invalid}
+                warning={warning}
+              />
+              {bucket && (
+                <Box variant="small" color="text-body-secondary">
+                  Submitted value:{' '}
+                  <Box variant="code" display="inline">
+                    amazon-braket-{bucket}
+                  </Box>
+                </Box>
+              )}
+            </SpaceBetween>
+          </FormField>
+
+          <FormField
+            label="Private DNS hostname"
+            constraintText="The .ec2.internal domain suffix is appended automatically."
+            errorText={invalid ? 'Enter a valid hostname.' : undefined}
+          >
+            <SpaceBetween size="xs">
+              <Input
+                value={host}
+                onChange={e => setHost(e.detail.value)}
+                suffix=".ec2.internal"
+                placeholder="my-host"
+                disabled={disabled}
+                readOnly={readOnly}
+                invalid={invalid}
+                warning={warning}
+              />
+              {host && (
+                <Box variant="small" color="text-body-secondary">
+                  Submitted value:{' '}
+                  <Box variant="code" display="inline">
+                    {host}.ec2.internal
+                  </Box>
+                </Box>
+              )}
+            </SpaceBetween>
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
 // ─── Baseline comparison ──────────────────────────────────────────────────────
 
 function BaselineComparison({ disabled, readOnly, invalid, warning }: FormatHintProps) {
@@ -305,9 +404,9 @@ export default function AdornmentsPage() {
         header={
           <Header
             variant="h1"
-            description="New prefix and suffix props on the Input component. Format hints are decorative and do not affect the submitted value. Mandatory prefixes are semantic and are included in the submitted value."
+            description="New prefix and suffix props on the Input component. Both props are decorative. They render a visual adornment and never affect the submitted value. To include a fixed prefix or suffix in the value, concatenate it in application code (see the required prefix/suffix section)."
           >
-            Input — prefix/suffix adornments
+            Input: prefix/suffix adornments
           </Header>
         }
       >
@@ -327,6 +426,7 @@ export default function AdornmentsPage() {
             setRtl={setRtl}
           />
           <FormatHintExamples {...stateProps} />
+          <RequiredAffixExamples {...stateProps} />
           <BaselineComparison {...stateProps} />
           <RtlSection />
         </SpaceBetween>

From 3bf9ca315537ddb6f31411ffabcc843310da2d21 Mon Sep 17 00:00:00 2001
From: Nathnael Dereje <natidere@amazon.de>
Date: Thu, 23 Jul 2026 14:36:43 +0200
Subject: [PATCH 3/3] feat: widen prefix/suffix API to ReactNode

- Change prefix and suffix props from string to React.ReactNode in
  InputProps and InternalInputProps
- Update JSDoc to document ReactNode usage (icons, badges, status
  indicators, composite elements)
- Expand adornments dev page with icon, badge, StatusIndicator, and
  composite ReactNode examples
- Update documenter snapshot
---
 pages/input/adornments.page.tsx               | 362 +++++++++++++++++-
 .../__snapshots__/documenter.test.ts.snap     |  79 ++--
 src/input/interfaces.ts                       |  30 +-
 src/input/internal.tsx                        |   4 +-
 4 files changed, 410 insertions(+), 65 deletions(-)

diff --git a/pages/input/adornments.page.tsx b/pages/input/adornments.page.tsx
index 13b81e0dcc..ed558b75ca 100644
--- a/pages/input/adornments.page.tsx
+++ b/pages/input/adornments.page.tsx
@@ -9,8 +9,10 @@ import Container from '~components/container';
 import ContentLayout from '~components/content-layout';
 import FormField from '~components/form-field';
 import Header from '~components/header';
+import Icon from '~components/icon';
 import Input from '~components/input';
 import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
 import Toggle from '~components/toggle';
 
 // ─── State controls panel ─────────────────────────────────────────────────────
@@ -76,16 +78,16 @@ function StateControls({
   );
 }
 
-// ─── Format hint examples ─────────────────────────────────────────────────────
+// ─── Format hint examples — string adornments ─────────────────────────────────
 
-interface FormatHintProps {
+interface StateProps {
   disabled: boolean;
   readOnly: boolean;
   invalid: boolean;
   warning: boolean;
 }
 
-function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+function FormatHintExamples({ disabled, readOnly, invalid, warning }: StateProps) {
   const [currency, setCurrency] = useState('');
   const [percent, setPercent] = useState('');
   const [compound, setCompound] = useState('');
@@ -97,9 +99,9 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
       header={
         <Header
           variant="h2"
-          description="Purely visual. Not submitted with the form value. Screen readers do not announce the adornment. The FormField label carries the unit."
+          description="String adornments. Purely visual. Not submitted with the form value. Screen readers do not announce the adornment — the FormField label carries the unit."
         >
-          Format hint adornments
+          Format hint adornments — string
           <Box display="inline-block" margin={{ left: 'xs' }}>
             <Badge color="blue">Decorative</Badge>
           </Box>
@@ -196,13 +198,324 @@ function FormatHintExamples({ disabled, readOnly, invalid, warning }: FormatHint
   );
 }
 
+// ─── ReactNode adornments — icons ─────────────────────────────────────────────
+
+function ReactNodeIconExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  const [search, setSearch] = useState('');
+  const [email, setEmail] = useState('');
+  const [url, setUrl] = useState('');
+  const [amount, setAmount] = useState('');
+  const [locked, setLocked] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="ReactNode adornments using Icon components. Icons should be aria-hidden when the FormField label already conveys the meaning."
+        >
+          ReactNode adornments — Icons
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="green">ReactNode</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField label="Search resources" errorText={invalid ? 'Enter a search term.' : undefined}>
+            <Input
+              value={search}
+              onChange={e => setSearch(e.detail.value)}
+              prefix={<Icon name="search" aria-hidden="true" />}
+              placeholder="Filter by name or tag"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Email address" errorText={invalid ? 'Enter a valid email.' : undefined}>
+            <Input
+              value={email}
+              onChange={e => setEmail(e.detail.value)}
+              prefix={<Icon name="envelope" aria-hidden="true" />}
+              type="email"
+              placeholder="user@example.com"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="Webhook URL"
+            constraintText="Must be a valid HTTPS endpoint."
+            errorText={invalid ? 'Enter a valid URL.' : undefined}
+          >
+            <Input
+              value={url}
+              onChange={e => setUrl(e.detail.value)}
+              prefix={<Icon name="external" aria-hidden="true" />}
+              type="url"
+              placeholder="https://example.com/hook"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Payment amount (USD)" errorText={invalid ? 'Enter a valid amount.' : undefined}>
+            <Input
+              value={amount}
+              onChange={e => setAmount(e.detail.value)}
+              prefix={<Icon name="ticket" aria-hidden="true" />}
+              suffix="USD"
+              inputMode="decimal"
+              placeholder="0.00"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="API secret key"
+            description="Stored encrypted. Visible only at creation."
+            errorText={invalid ? 'Enter a valid key.' : undefined}
+          >
+            <Input
+              value={locked}
+              onChange={e => setLocked(e.detail.value)}
+              prefix={<Icon name="lock-private" aria-hidden="true" />}
+              type="password"
+              placeholder="sk-••••••••"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
+// ─── ReactNode adornments — Badges ────────────────────────────────────────────
+
+function ReactNodeBadgeExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  const [beta, setBeta] = useState('');
+  const [required, setRequired] = useState('');
+  const [new_, setNew_] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="ReactNode adornments using Badge components to signal field status, tier, or requirement."
+        >
+          ReactNode adornments — Badges
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="green">ReactNode</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField
+            label="Feature flag name"
+            description="This field is in beta."
+            errorText={invalid ? 'Enter a flag name.' : undefined}
+          >
+            <Input
+              value={beta}
+              onChange={e => setBeta(e.detail.value)}
+              suffix={<Badge color="blue">Beta</Badge>}
+              placeholder="my-feature-flag"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="Account ID"
+            description="12-digit AWS account identifier."
+            errorText={invalid ? 'Enter a valid account ID.' : undefined}
+          >
+            <Input
+              value={required}
+              onChange={e => setRequired(e.detail.value)}
+              suffix={<Badge color="red">Required</Badge>}
+              inputMode="numeric"
+              placeholder="123456789012"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="AI model endpoint"
+            description="Newly added model endpoint."
+            errorText={invalid ? 'Enter a valid endpoint.' : undefined}
+          >
+            <Input
+              value={new_}
+              onChange={e => setNew_(e.detail.value)}
+              suffix={<Badge color="green">New</Badge>}
+              placeholder="arn:aws:bedrock:..."
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
+// ─── ReactNode adornments — StatusIndicator ───────────────────────────────────
+
+function ReactNodeStatusExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  const [endpoint, setEndpoint] = useState('');
+  const [pending, setPending] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="ReactNode adornments using StatusIndicator to convey live connectivity or validation state alongside the field."
+        >
+          ReactNode adornments — StatusIndicator
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="green">ReactNode</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField
+            label="Database endpoint"
+            description="Shows the live connection status."
+            errorText={invalid ? 'Enter a valid endpoint.' : undefined}
+          >
+            <Input
+              value={endpoint}
+              onChange={e => setEndpoint(e.detail.value)}
+              suffix={<StatusIndicator type="success">Connected</StatusIndicator>}
+              placeholder="db.example.com:5432"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField
+            label="Async job ID"
+            description="Submitted for processing."
+            errorText={invalid ? 'Enter a job ID.' : undefined}
+          >
+            <Input
+              value={pending}
+              onChange={e => setPending(e.detail.value)}
+              suffix={<StatusIndicator type="pending">Queued</StatusIndicator>}
+              placeholder="job-abc123"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
+// ─── ReactNode adornments — icon + text combination ───────────────────────────
+
+function ReactNodeCompositeExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  const [rate, setRate] = useState('');
+  const [storage, setStorage] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="Composite ReactNode adornments combining an icon with a text label. Use sparingly — prefer a plain string when text alone is sufficient."
+        >
+          ReactNode adornments — Icon + text composite
+          <Box display="inline-block" margin={{ left: 'xs' }}>
+            <Badge color="green">ReactNode</Badge>
+          </Box>
+        </Header>
+      }
+    >
+      <SpaceBetween size="l">
+        <ColumnLayout columns={2}>
+          <FormField label="Request rate limit (req/s)" errorText={invalid ? 'Enter a valid rate.' : undefined}>
+            <Input
+              value={rate}
+              onChange={e => setRate(e.detail.value)}
+              suffix={
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  <Icon name="status-positive" aria-hidden="true" />
+                  req/s
+                </span>
+              }
+              inputMode="numeric"
+              placeholder="1000"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+
+          <FormField label="Storage capacity (GB)" errorText={invalid ? 'Enter a valid capacity.' : undefined}>
+            <Input
+              value={storage}
+              onChange={e => setStorage(e.detail.value)}
+              prefix={<Icon name="settings" aria-hidden="true" />}
+              suffix={
+                <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  <Icon name="upload-download" aria-hidden="true" />
+                  GB
+                </span>
+              }
+              inputMode="numeric"
+              placeholder="512"
+              disabled={disabled}
+              readOnly={readOnly}
+              invalid={invalid}
+              warning={warning}
+            />
+          </FormField>
+        </ColumnLayout>
+      </SpaceBetween>
+    </Container>
+  );
+}
+
 // ─── Required prefix/suffix (userland concatenation) ──────────────────────────
-// These examples answer the "mandatory prefix/suffix" use-case. The component
-// does NOT do this. The `prefix`/`suffix` props are always decorative and never
-// mutate `onChange`. The fixed segment is shown visually with the decorative prop,
-// and the builder concatenates it into the value in application code.
 
-function RequiredAffixExamples({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+function RequiredAffixExamples({ disabled, readOnly, invalid, warning }: StateProps) {
   const [url, setUrl] = useState('');
   const [bucket, setBucket] = useState('');
   const [host, setHost] = useState('');
@@ -312,14 +625,14 @@ function RequiredAffixExamples({ disabled, readOnly, invalid, warning }: FormatH
 
 // ─── Baseline comparison ──────────────────────────────────────────────────────
 
-function BaselineComparison({ disabled, readOnly, invalid, warning }: FormatHintProps) {
+function BaselineComparison({ disabled, readOnly, invalid, warning }: StateProps) {
   const [value, setValue] = useState('');
   return (
     <Container
       header={
         <Header
           variant="h2"
-          description="Standard Cloudscape Input with no adornment. Use this as a visual reference to confirm the adorned variant matches the baseline styling."
+          description="Standard Cloudscape Input with no adornment. Use as a visual reference to confirm the adorned variant matches baseline styling."
         >
           Baseline: plain Input
         </Header>
@@ -345,6 +658,7 @@ function BaselineComparison({ disabled, readOnly, invalid, warning }: FormatHint
 function RtlSection() {
   const [val, setVal] = useState('');
   const [val2, setVal2] = useState('');
+  const [val3, setVal3] = useState('');
   return (
     <Container header={<Header variant="h2">RTL layout</Header>}>
       <Box variant="p" color="text-body-secondary">
@@ -356,7 +670,12 @@ function RtlSection() {
         <Box variant="code" display="inline">
           suffix
         </Box>{' '}
-        appears on the leading edge. The prop names are semantic (before/after the value), not directional.
+        appears on the leading edge. The prop names are semantic (before/after the value), not directional. Icons flip
+        correctly because the flex container inherits{' '}
+        <Box variant="code" display="inline">
+          dir
+        </Box>
+        .
       </Box>
       <Box margin={{ top: 'm' }}>
         <div dir="rtl">
@@ -379,6 +698,15 @@ function RtlSection() {
                 placeholder="0"
               />
             </FormField>
+            <FormField label="بريد إلكتروني">
+              <Input
+                value={val3}
+                onChange={e => setVal3(e.detail.value)}
+                prefix={<Icon name="envelope" aria-hidden="true" />}
+                type="email"
+                placeholder="user@example.com"
+              />
+            </FormField>
           </ColumnLayout>
         </div>
       </Box>
@@ -404,9 +732,9 @@ export default function AdornmentsPage() {
         header={
           <Header
             variant="h1"
-            description="New prefix and suffix props on the Input component. Both props are decorative. They render a visual adornment and never affect the submitted value. To include a fixed prefix or suffix in the value, concatenate it in application code (see the required prefix/suffix section)."
+            description="prefix and suffix props on Input now accept any ReactNode — plain strings, icons, badges, status indicators, or composite elements. Both props are always decorative and never affect the submitted value."
           >
-            Input: prefix/suffix adornments
+            Input: prefix/suffix adornments (ReactNode)
           </Header>
         }
       >
@@ -426,6 +754,10 @@ export default function AdornmentsPage() {
             setRtl={setRtl}
           />
           <FormatHintExamples {...stateProps} />
+          <ReactNodeIconExamples {...stateProps} />
+          <ReactNodeBadgeExamples {...stateProps} />
+          <ReactNodeStatusExamples {...stateProps} />
+          <ReactNodeCompositeExamples {...stateProps} />
           <RequiredAffixExamples {...stateProps} />
           <BaselineComparison {...stateProps} />
           <RtlSection />
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 25122ba54e..7a7c25be6f 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -16986,26 +16986,6 @@ We do not support using this attribute to apply custom styling.",
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Short text or symbol rendered in a shaded cell on the leading edge of the
-input field, before the editable value.
-
-Use for contextual decorators such as currency symbols (\`$\`, \`€\`),
-URL schemes (\`https://\`), or path prefixes (\`/api/v2/\`).
-
-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 so screen reader users receive the same context
-(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.",
-      "name": "prefix",
-      "optional": true,
-      "type": "string",
-    },
     {
       "description": "Specifies if the control is read-only, which prevents the
 user from modifying the value but includes it in a form
@@ -17277,22 +17257,6 @@ Refer to the [style](/components/input/?tabId=style) tab for more details.",
       ],
       "type": "InputProps.Style",
     },
-    {
-      "description": "Short text or symbol rendered in a shaded cell on the trailing edge of
-the input field, after the editable value.
-
-Use for units of measure (\`%\`, \`ms\`, \`TB/mo\`, \`GB\`, \`req/s\`, \`days\`),
-currency codes (\`USD\`, \`EUR\`), or degree notation (\`°C\`, \`°E\`).
-
-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.",
-      "name": "suffix",
-      "optional": true,
-      "type": "string",
-    },
     {
       "defaultValue": "'text'",
       "description": "Specifies the type of control to render.
@@ -17334,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",
 }
 `;
diff --git a/src/input/interfaces.ts b/src/input/interfaces.ts
index 81fa01436c..1f75e611f5 100644
--- a/src/input/interfaces.ts
+++ b/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';
@@ -190,15 +192,19 @@ export interface InputProps
   style?: InputProps.Style;
 
   /**
-   * Short text or symbol rendered in a shaded cell on the leading edge of the
-   * input field, before the editable value.
+   * 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://`), or path prefixes (`/api/v2/`).
+   * 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. Ensure the unit is also reflected in the visible
-   * `<FormField>` label so screen reader users receive the same context
+   * 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.
@@ -208,14 +214,16 @@ export interface InputProps
    *
    * @see suffix
    */
-  prefix?: string;
+  prefix?: React.ReactNode;
 
   /**
-   * Short text or symbol rendered in a shaded cell on the trailing edge of
-   * the input field, after the editable value.
+   * Content rendered in a shaded cell on the trailing edge of the input field,
+   * after the editable value.
    *
-   * Use for units of measure (`%`, `ms`, `TB/mo`, `GB`, `req/s`, `days`),
-   * currency codes (`USD`, `EUR`), or degree notation (`°C`, `°E`).
+   * 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
@@ -225,7 +233,7 @@ export interface InputProps
    *
    * @see prefix
    */
-  suffix?: string;
+  suffix?: React.ReactNode;
 }
 
 export namespace InputProps {
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
index d01716d329..516da8f39d 100644
--- a/src/input/internal.tsx
+++ b/src/input/internal.tsx
@@ -58,8 +58,8 @@ export interface InternalInputProps
   __inlineLabelText?: string;
   __fullWidth?: boolean;
 
-  prefix?: string;
-  suffix?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
 }
 
 function InternalInput(