The PasswordInput from pol-ui represents a component that allows the user to input a password. It has a toggle to show the password.

This toggle is represented by an icon that changes the visibility of the password and it can be customized by the user.


Import the component from pol-ui to use the PasswordInput element:

import { PasswordInput } from "pol-ui";

Default PasswordInput

Default PasswordInput

import { PasswordInput } from "pol-ui";
const PasswordInputComponent = () => {
  return <PasswordInput placeholder="******" label="Password" />;
export default PasswordInputComponent;


As this component it is a wrapper of the Input component, so it has all the props and theme of the Input component plus the following props:

Prop nameTypeDefaultDescription
showIconFC<ComponentProps<'svg'>>TbEyeThe icon to show the password.
hideIconFC<ComponentProps<'svg'>>TbEyeOffThe icon to hide the password.
defaultVisibilitybooleanfalseThe default visibility of the password.

You can also provide any prop comming from the Input component.


The PasswordInput component uses the InputTheme type to customize the component.

Since February 23, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores