diff --git a/src/components/InputBox/InputBox.stories.tsx b/src/components/InputBox/InputBox.stories.tsx
index 93f716b7..c4a292e3 100644
--- a/src/components/InputBox/InputBox.stories.tsx
+++ b/src/components/InputBox/InputBox.stories.tsx
@@ -91,6 +91,15 @@ PasswordInput.args = {
type: "password",
};
+export const PasswordInputRevealDisabled = Template.bind({});
+PasswordInputRevealDisabled.args = {
+ label: "An input box",
+ required: true,
+ tooltip: "Tooltip text",
+ type: "password",
+ passwordRevealEnabled: false,
+};
+
export const WithOverlayIcon = Template.bind({});
WithOverlayIcon.args = {
label: "An input box",
diff --git a/src/components/InputBox/InputBox.styles.ts b/src/components/InputBox/InputBox.styles.ts
index 6e85078b..3112a916 100644
--- a/src/components/InputBox/InputBox.styles.ts
+++ b/src/components/InputBox/InputBox.styles.ts
@@ -192,6 +192,9 @@ export const containerSizeSmall = css({
});
export const containerOverlayIcon = css({
+ "& input": {
+ paddingRight: 37,
+ },
"& .accessoryIcon": {
right: 37,
},
diff --git a/src/components/InputBox/InputBox.types.ts b/src/components/InputBox/InputBox.types.ts
index 412b4a09..b59f4a92 100644
--- a/src/components/InputBox/InputBox.types.ts
+++ b/src/components/InputBox/InputBox.types.ts
@@ -43,4 +43,5 @@ export interface InputBoxProps
sizeMode?: InputBoxSize;
orientation?: InputBoxOrientation;
disableErrorUntilFocus?: boolean;
+ passwordRevealEnabled?: boolean;
}
diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
index 2f548267..5a8ea2f5 100644
--- a/src/components/InputBox/index.tsx
+++ b/src/components/InputBox/index.tsx
@@ -63,6 +63,7 @@ const Inputdiv = React.forwardRef<
onFocus,
disableErrorUntilFocus = false,
children,
+ passwordRevealEnabled = true,
value,
...props
},
@@ -86,7 +87,7 @@ const Inputdiv = React.forwardRef<
let inputdivWrapperIcon = overlayIcon;
let inputdivWrapperType = type;
- if (type === "password" && !overlayIcon) {
+ if (type === "password" && passwordRevealEnabled && !overlayIcon) {
inputdivWrapperIcon = toggleTextInput ? : ;
inputdivWrapperType = toggleTextInput ? "text" : "password";
}
@@ -110,7 +111,9 @@ const Inputdiv = React.forwardRef<
css={[
containerStyles,
sizeMode === "small" ? containerSizeSmall : {},
- overlayIcon || type === "password" ? containerOverlayIcon : {},
+ overlayIcon || (type === "password" && passwordRevealEnabled)
+ ? containerOverlayIcon
+ : {},
css({ flexDirection: orientation === "vertical" ? "column" : "row" }),
overrideThemes,
]}