diff --git a/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx b/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx
index a2f0cfcf69..eedae316c2 100644
--- a/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx
+++ b/apps/extension/src/App/Settings/ChangePassword/ChangePassword.tsx
@@ -88,8 +88,7 @@ export const ChangePassword = ({
variant={InputVariants.Password}
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
- hint={feedback.suggestions.join(" ")}
- error={feedback.warning}
+ error={feedback.warning || feedback.suggestions.join(" ")}
/>
{
}
};
+ const displayError = zxcvbnFeedback.warning
+ ? zxcvbnFeedback.warning
+ : zxcvbnFeedback.suggestions.map((suggestion: string, index: number) => (
+
+ {suggestion}
+
+ ));
+
return (
<>
(
-
- {suggestion}
-
- )
- )}
+ error={displayError}
placeholder="At least 8 characters"
onChange={(e) => setPassword(e.target.value)}
onBlur={() => {
diff --git a/packages/components/src/Input/types.ts b/packages/components/src/Input/types.ts
index 83740632ee..b5020ff63e 100644
--- a/packages/components/src/Input/types.ts
+++ b/packages/components/src/Input/types.ts
@@ -11,7 +11,7 @@ export enum InputVariants {
export type ComponentProps = {
label?: string | React.ReactNode;
- error?: string;
+ error?: string | React.ReactNode;
sensitive?: boolean;
hint?: string | React.ReactNode;
theme?: ThemeColor;