diff --git a/pages/input/adornments.page.tsx b/pages/input/adornments.page.tsx
new file mode 100644
index 0000000000..ed558b75ca
--- /dev/null
+++ b/pages/input/adornments.page.tsx
@@ -0,0 +1,768 @@
+// 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 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 ─────────────────────────────────────────────────────
+
+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 — string adornments ─────────────────────────────────
+
+interface StateProps {
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  warning: boolean;
+}
+
+function FormatHintExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  const [currency, setCurrency] = useState('');
+  const [percent, setPercent] = useState('');
+  const [compound, setCompound] = useState('');
+  const [both, setBoth] = useState('');
+  const [ms, setMs] = useState('');
+
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          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 — string
+          <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="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>
+  );
+}
+
+// ─── 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) ──────────────────────────
+
+function RequiredAffixExamples({ disabled, readOnly, invalid, warning }: StateProps) {
+  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 }: StateProps) {
+  const [value, setValue] = useState('');
+  return (
+    <Container
+      header={
+        <Header
+          variant="h2"
+          description="Standard Cloudscape Input with no adornment. Use as a visual reference to confirm the adorned variant matches 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('');
+  const [val3, setVal3] = 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. Icons flip
+        correctly because the flex container inherits{' '}
+        <Box variant="code" display="inline">
+          dir
+        </Box>
+        .
+      </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>
+            <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>
+    </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="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 (ReactNode)
+          </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} />
+          <ReactNodeIconExamples {...stateProps} />
+          <ReactNodeBadgeExamples {...stateProps} />
+          <ReactNodeStatusExamples {...stateProps} />
+          <ReactNodeCompositeExamples {...stateProps} />
+          <RequiredAffixExamples {...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..7a7c25be6f 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/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": [],
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..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';
@@ -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 {
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
index 7dad564dbe..516da8f39d 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?: React.ReactNode;
+  suffix?: React.ReactNode;
 }
 
 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']}`);
+  }
 }