Formatted Input: placeholder feature (#132)

This PR aims to add the placeholder property

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- property `placeholder` to `FormattedInput` component.
+
 ## [3.2.0] - 2025-04-30
 
 ### Added

cypress/cypress/component/Formatted/NumericFormat.cy.tsx

@@ -163,3 +163,20 @@ it("style is correcly applied", () => {
 
   cy.get(`input[id=${name}]`).should("have.attr", "style", style);
 });
+
+it("has placeholder", () => {
+  const name = faker.random.word();
+  const placeholder = faker.random.words(5);
+
+  cy.mount(
+    <Form
+      onSubmit={() => {
+        // Do nothing
+      }}
+    >
+      <FormattedInput name={name} label={name} numericFormat={numericFormat} placeholder={placeholder} />
+    </Form>,
+  );
+
+  cy.get(`#${name}`).should("have.attr", "placeholder", placeholder);
+});

src/lib/FormattedInput.tsx

@@ -10,6 +10,7 @@ import { useFormContext } from "./context/FormContext";
 interface FormattedInputProps<T extends FieldValues> extends CommonInputProps<T> {
   patternFormat?: PatternFormatProps;
   numericFormat?: NumericFormatProps;
+  placeholder?: string;
 }
 
 const FormattedInput = <T extends FieldValues>(props: FormattedInputProps<T>) => {
@@ -33,6 +34,7 @@ const FormattedInput = <T extends FieldValues>(props: FormattedInputProps<T>) =>
     addonRight,
     className = "",
     hideValidationMessage = false,
+    placeholder,
   } = props;
   const { name, id } = useSafeNameId(props.name, props.id);
   const { control, disabled: formDisabled } = useFormContext();
@@ -89,6 +91,7 @@ const FormattedInput = <T extends FieldValues>(props: FormattedInputProps<T>) =>
                   }}
                   onFocus={focusHandler}
                   style={style}
+                  placeholder={placeholder}
                 ></NumericFormat>
               )}