{
+ showPasswordLabel?: string
+ checkboxDataTestId?: string
+ className?: string
+ fieldClassName?: string
+}
+
+const PasswordField = (props: PasswordFieldProps) => {
+ const {
+ showPasswordLabel = "Show password",
+ checkboxDataTestId,
+ className,
+ fieldClassName,
+ ...fieldProps
+ } = props
+
+ const classes = ["password-field"]
+
+ if (className) {
+ classes.push(className)
+ }
+
+ const [visible, setVisible] = useState(false)
+
+ const idOrName = props.id || props.name
+ const checkboxIdOrName = `${idOrName}-show-password`
+
+ return (
+
+
+ setVisible((prevVisible) => !prevVisible)}
+ dataTestId={checkboxDataTestId}
+ />
+
+ )
+}
+
+export { PasswordField as default, PasswordField }
diff --git a/src/global/forms.scss b/src/global/forms.scss
index fbb0b96..5368ea8 100644
--- a/src/global/forms.scss
+++ b/src/global/forms.scss
@@ -412,3 +412,10 @@ progress,
@apply bg-primary;
transition: width 0.25s;
}
+
+.password-field {
+ margin-block-end: 1.25rem;
+ * > &:last-child {
+ margin-block-end: 0;
+ }
+}