Add prefix and suffix props to TextField component

Author: codegen-sh[bot]

apps/docs/src/remix-hook-form/text-field.stories.tsx

@@ -12,6 +12,8 @@ import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
 
 const formSchema = z.object({
   username: z.string().min(3, 'Username must be at least 3 characters'),
+  price: z.string().min(1, 'Price is required'),
+  email: z.string().email('Invalid email address'),
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -26,6 +28,8 @@ const ControlledTextFieldExample = () => {
     resolver: zodResolver(formSchema),
     defaultValues: {
       username: INITIAL_USERNAME,
+      price: '10.00',
+      email: 'user@example.com',
     },
     fetcher,
     submitConfig: {
@@ -37,11 +41,28 @@ const ControlledTextFieldExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
-        <TextField name="username" label="Username" description="Enter a unique username" />
-        <Button type="submit" className="mt-4">
-          Submit
-        </Button>
-        {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
+        <div className="space-y-6">
+          <TextField name="username" label="Username" description="Enter a unique username" />
+          
+          <TextField 
+            name="price" 
+            label="Price" 
+            description="Enter the price" 
+            prefix="$" 
+          />
+          
+          <TextField 
+            name="email" 
+            label="Email" 
+            description="Enter your email address" 
+            suffix="@example.com" 
+          />
+          
+          <Button type="submit" className="mt-4">
+            Submit
+          </Button>
+          {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
+        </div>
       </fetcher.Form>
     </RemixFormProvider>
   );
@@ -155,4 +176,33 @@ export const Tests: Story = {
     await testUsernameTaken(storyContext);
     await testValidSubmission(storyContext);
   },
+};
+
+// Additional stories to showcase prefix and suffix
+export const WithPrefix: Story = {
+  name: 'With Prefix',
+  args: {
+    name: 'price',
+    label: 'Price',
+    prefix: '$',
+  },
+};
+
+export const WithSuffix: Story = {
+  name: 'With Suffix',
+  args: {
+    name: 'email',
+    label: 'Email',
+    suffix: '@example.com',
+  },
+};
+
+export const WithBoth: Story = {
+  name: 'With Prefix and Suffix',
+  args: {
+    name: 'measurement',
+    label: 'Measurement',
+    prefix: '~',
+    suffix: 'cm',
+  },
 };

packages/components/src/ui/text-field.tsx

@@ -1,3 +1,4 @@
+// biome-ignore lint/style/noNamespaceImport: prevents React undefined errors when exporting as a component library
 import * as React from 'react';
 import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import {
@@ -10,10 +11,23 @@ import {
   FormMessage,
 } from './form';
 import { TextInput } from './text-input';
+import { cn } from './utils';
 
-export interface TextFieldComponents extends FieldComponents {
-  Input?: React.ComponentType<React.InputHTMLAttributes<HTMLInputElement>>;
-}
+export const FieldPrefix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return (
+    <span className={cn("whitespace-nowrap shadow-sm font-bold rounded-md text-base flex items-center px-2.5 pr-5 -mr-2.5 bg-gray-50 text-gray-500", className)}>
+      {children}
+    </span>
+  );
+};
+
+export const FieldSuffix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return (
+    <span className={cn("whitespace-nowrap shadow-sm font-bold rounded-md text-base flex items-center px-2.5 pl-5 -ml-2.5 bg-gray-50 text-gray-500", className)}>
+      {children}
+    </span>
+  );
+};
 
 export interface TextFieldProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -23,13 +37,13 @@ export interface TextFieldProps<
   name: TName;
   label?: string;
   description?: string;
-  components?: Partial<TextFieldComponents>;
+  components?: Partial<FieldComponents>;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
 }
 
 export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
-  ({ control, name, label, description, className, components, ...props }, ref) => {
-    const InputComponent = components?.Input || TextInput;
-
+  ({ control, name, label, description, className, components, prefix, suffix, ...props }, ref) => {
     return (
       <FormField
         control={control}
@@ -38,7 +52,23 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
           <FormItem className={className} ref={ref}>
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             <FormControl Component={components?.FormControl}>
-              <InputComponent {...field} {...props} ref={field.ref} />
+              <div className={cn("flex items-stretch relative", {
+                "field__input--with-prefix": prefix,
+                "field__input--with-suffix": suffix,
+              })}>
+                {prefix && <FieldPrefix>{prefix}</FieldPrefix>}
+                <TextInput 
+                  {...field} 
+                  {...props} 
+                  ref={field.ref} 
+                  className={cn(props.className, {
+                    "z-10": prefix || suffix,
+                    "rounded-l-none": prefix,
+                    "rounded-r-none": suffix,
+                  })}
+                />
+                {suffix && <FieldSuffix>{suffix}</FieldSuffix>}
+              </div>
             </FormControl>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
             {fieldState.error && (