Add prefix and postfix support in react sdk

Signed-off-by: sajid.mannikeri <sajid.mannikeri@infosys.com>

Author: SajidMannikeri17

packages/javascript/src/index.ts

@@ -71,6 +71,7 @@ export type {
   ValidationRule,
   ValidationRuleType,
   FieldError,
+  PrefixOption,
 } from './models/embedded-flow';
 export {EmbeddedSignInFlowStatus, EmbeddedSignInFlowType} from './models/embedded-signin-flow';
 export type {

packages/javascript/src/models/embedded-flow.ts

@@ -402,6 +402,10 @@ export interface EmbeddedFlowComponent {
    */
   placeholder?: string;
 
+  postfix?: string;
+
+  prefixes?: string | PrefixOption[];
+
   /**
    * Reference identifier for the component (e.g., field name, action ref)
    */
@@ -508,6 +512,17 @@ export interface FieldError {
   message: string;
 }
 
+export interface PrefixOption {
+  /** The value of the prefix option (e.g., country code, currency symbol). */
+  value: string;
+  /** Optional label for the prefix option (e.g., "United States (+1)"). */
+  label: string;
+  /** Optional icon URL for the prefix option (e.g., flag image). */
+  maxLength?: number;
+
+  regex?: string;
+}
+
 /**
  * Response data structure for embedded flow API.
  *

packages/react/src/components/presentation/auth/AuthOptionFactory.tsx

@@ -34,9 +34,10 @@ import {
   ConsentPurposeDecision,
   ConsentAttributeElement,
   OrganizationUnitListResponse,
+  PrefixOption,
 } from '@thunderid/browser';
 import DOMPurify from 'dompurify';
-import {cloneElement, CSSProperties, ReactElement} from 'react';
+import {ChangeEvent, cloneElement, CSSProperties, ReactElement} from 'react';
 import {
   ComponentRenderer,
   ComponentRenderContext,
@@ -60,7 +61,9 @@ import CopyableText from '../../primitives/CopyableText/CopyableText';
 import DatePicker from '../../primitives/DatePicker/DatePicker';
 import Divider from '../../primitives/Divider/Divider';
 import flowIconRegistry from '../../primitives/Icons/flowIconRegistry';
+import AffixedField from '../../primitives/AffixedField/AffixedField';
 import Select from '../../primitives/Select/Select';
+import {affixPostfixKey, affixPrefixKey} from '../../../utils/composeAffixedInputs';
 import Typography from '../../primitives/Typography/Typography';
 import {TypographyVariant} from '../../primitives/Typography/Typography.styles';
 
@@ -257,6 +260,52 @@ const createAuthComponentFromFlow = (
       const error: string = isTouched ? formErrors[identifier] : undefined!;
       const fieldType: string = getFieldType(component.type);
 
+      // Prefix/postfix are accepted on any text-family input. When either is present,
+      // route to AffixedField so the leading affix renders and submit-time composition
+      // is picked up by composeAffixedInputs via the sentinel keys.
+      // Both string.length and Array.length are defined, so a single truthy+length
+      // check covers `prefixes?: string | PrefixOption[]`.
+      const hasPrefixes: boolean = !!component.prefixes && component.prefixes.length > 0;
+      const hasPostfix: boolean = typeof component.postfix === 'string' && component.postfix.length > 0;
+
+      if (hasPrefixes || hasPostfix) {
+        const prefixStateKey: string = affixPrefixKey(identifier);
+        const postfixStateKey: string = affixPostfixKey(identifier);
+        const defaultPrefixValue: string = hasPrefixes
+          ? typeof component.prefixes === 'string'
+            ? component.prefixes
+            : (component.prefixes as PrefixOption[])[0].value
+          : '';
+        const selectedPrefix: string = formValues[prefixStateKey] ?? defaultPrefixValue;
+
+        return (
+          <AffixedField
+            key={key}
+            className={options.inputClassName}
+            label={resolve(component.label) || ''}
+            name={identifier}
+            placeholder={resolve(component.placeholder) || ''}
+            required={component.required || false}
+            error={error}
+            value={value}
+            type={fieldType}
+            prefixes={component.prefixes}
+            prefixValue={selectedPrefix}
+            onChange={(e: ChangeEvent<HTMLInputElement>): void => onInputChange(identifier, e.target.value)}
+            onBlur={(): void => options.onInputBlur?.(identifier)}
+            onPrefixChange={(newPrefix: string): void => onInputChange(prefixStateKey, newPrefix)}
+            onFocus={(): void => {
+              if (hasPrefixes && formValues[prefixStateKey] === undefined) {
+                onInputChange(prefixStateKey, defaultPrefixValue);
+              }
+              if (hasPostfix && formValues[postfixStateKey] === undefined) {
+                onInputChange(postfixStateKey, component.postfix!);
+              }
+            }}
+          />
+        );
+      }
+
       const field: any = createField({
         className: cx(options.inputClassName, component.classes),
         error,

packages/react/src/components/presentation/auth/Recovery/BaseRecovery.tsx

@@ -39,6 +39,7 @@ import useTheme from '../../../../contexts/Theme/useTheme';
 import useThunderID from '../../../../contexts/ThunderID/useThunderID';
 import {useForm, FormField} from '../../../../hooks/useForm';
 import useTranslation from '../../../../hooks/useTranslation';
+import composeAffixedInputs from '../../../../utils/composeAffixedInputs';
 import {normalizeFlowResponse, extractErrorMessage} from '../../../../utils/flowTransformer';
 import getAuthComponentHeadings from '../../../../utils/getAuthComponentHeadings';
 import AlertPrimitive from '../../../primitives/Alert/Alert';
@@ -305,9 +306,13 @@ const BaseRecoveryContent: FC<BaseRecoveryProps> = ({
     clearMessages();
 
     try {
+      const composedData: Record<string, any> | undefined = data
+        ? composeAffixedInputs(data as Record<string, string>)
+        : undefined;
+
       const filteredInputs: Record<string, any> = {};
-      if (data) {
-        Object.entries(data).forEach(([key, value]: [string, any]) => {
+      if (composedData) {
+        Object.entries(composedData).forEach(([key, value]: [string, any]) => {
           if (value !== null && value !== undefined && value !== '') {
             filteredInputs[key] = value;
           }

packages/react/src/components/presentation/auth/SignIn/BaseSignIn.tsx

@@ -37,6 +37,7 @@ import useTheme from '../../../../contexts/Theme/useTheme';
 import useThunderID from '../../../../contexts/ThunderID/useThunderID';
 import {FormField, useForm} from '../../../../hooks/useForm';
 import useTranslation from '../../../../hooks/useTranslation';
+import composeAffixedInputs from '../../../../utils/composeAffixedInputs';
 import {extractErrorMessage} from '../../../../utils/flowTransformer';
 import AlertPrimitive from '../../../primitives/Alert/Alert';
 // eslint-disable-next-line import/no-named-as-default
@@ -401,12 +402,16 @@ const BaseSignInContent: FC<BaseSignInProps> = ({
     clearMessages();
 
     try {
+      const composedData: Record<string, any> | undefined = data
+        ? composeAffixedInputs(data as Record<string, string>)
+        : undefined;
+
       // Filter out empty or undefined input values
       const filteredInputs: Record<string, any> = {};
-      if (data) {
-        Object.keys(data).forEach((key: any) => {
-          if (data[key] !== undefined && data[key] !== null && data[key] !== '') {
-            filteredInputs[key] = data[key];
+      if (composedData) {
+        Object.keys(composedData).forEach((key: any) => {
+          if (composedData[key] !== undefined && composedData[key] !== null && composedData[key] !== '') {
+            filteredInputs[key] = composedData[key];
           }
         });
       }

packages/react/src/components/presentation/auth/SignUp/BaseSignUp.tsx

@@ -41,6 +41,7 @@ import useTheme from '../../../../contexts/Theme/useTheme';
 import useThunderID from '../../../../contexts/ThunderID/useThunderID';
 import {useForm, FormField} from '../../../../hooks/useForm';
 import useTranslation from '../../../../hooks/useTranslation';
+import composeAffixedInputs from '../../../../utils/composeAffixedInputs';
 import {normalizeFlowResponse, extractErrorMessage} from '../../../../utils/flowTransformer';
 import getAuthComponentHeadings from '../../../../utils/getAuthComponentHeadings';
 import {handlePasskeyRegistration} from '../../../../utils/passkey';
@@ -795,10 +796,14 @@ const BaseSignUpContent: FC<BaseSignUpProps> = ({
     clearMessages();
 
     try {
+      const composedData: Record<string, any> | undefined = data
+        ? composeAffixedInputs(data as Record<string, string>)
+        : undefined;
+
       // Filter out empty or undefined input values
       const filteredInputs: Record<string, any> = {};
-      if (data) {
-        Object.entries(data).forEach(([key, value]: [string, any]) => {
+      if (composedData) {
+        Object.entries(composedData).forEach(([key, value]: [string, any]) => {
           if (value !== null && value !== undefined && value !== '') {
             filteredInputs[key] = value;
           }

packages/react/src/components/primitives/AffixedField/AffixedField.styles.ts

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {css} from '@emotion/css';
+import {Theme} from '@thunderid/browser';
+import {useMemo} from 'react';
+
+/**
+ * Creates styles for the AffixedField component. The container is a horizontal flex
+ * row with a prefix element (span or select) joined to a shared-border input.
+ */
+const useStyles = (
+  theme: Theme,
+  colorScheme: string,
+  disabled: boolean,
+  hasError: boolean,
+  hasPrefix: boolean,
+): Record<string, string> =>
+  useMemo(() => {
+    const borderColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;
+    const focusColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;
+    const borderRadius: string = theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium;
+
+    const inputContainer: string = css`
+      position: relative;
+      display: flex;
+      align-items: stretch;
+      width: 100%;
+    `;
+
+    const inputBase: string = css`
+      flex: 1;
+      min-width: 0;
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${borderColor};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+
+      &::placeholder {
+        color: ${theme.vars.colors.text.secondary};
+        opacity: 0.7;
+      }
+
+      &:focus {
+        border-color: ${focusColor};
+        box-shadow: 0 0 0 2px ${focusColor}20;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${focusColor};
+      }
+    `;
+
+    const input: string = hasPrefix
+      ? css`
+          ${inputBase};
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+          border-start-end-radius: ${borderRadius};
+          border-end-end-radius: ${borderRadius};
+          border-inline-start: none;
+        `
+      : css`
+          ${inputBase};
+          border-radius: ${borderRadius};
+        `;
+
+    const prefixBase: string = css`
+      display: flex;
+      align-items: center;
+      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${borderColor};
+      border-start-start-radius: ${borderRadius};
+      border-end-start-radius: ${borderRadius};
+      background-color: ${theme.vars.colors.background.surface};
+      color: ${theme.vars.colors.text.primary};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-family: ${theme.vars.typography.fontFamily};
+      white-space: nowrap;
+    `;
+
+    const prefixSpan: string = css`
+      ${prefixBase};
+      user-select: none;
+      color: ${theme.vars.colors.text.secondary};
+    `;
+
+    const prefixSelect: string = css`
+      ${prefixBase};
+      cursor: pointer;
+      appearance: auto;
+      padding-inline-end: calc(${theme.vars.spacing.unit} * 1.5);
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${focusColor};
+        box-shadow: 0 0 0 2px ${focusColor}20;
+        z-index: 1;
+      }
+    `;
+
+    return {
+      input,
+      inputContainer,
+      prefixSelect,
+      prefixSpan,
+    };
+  }, [theme, colorScheme, disabled, hasError, hasPrefix]);
+
+export default useStyles;