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.
Importation
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;Props
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 name | Type | Default | Description |
|---|---|---|---|
| showIcon | FC<ComponentProps<'svg'>> | TbEye | The icon to show the password. |
| hideIcon | FC<ComponentProps<'svg'>> | TbEyeOff | The icon to hide the password. |
| defaultVisibility | boolean | false | The default visibility of the password. |
💡
You can also provide any prop comming from the Input component.
Theme
The PasswordInput component uses the InputTheme type to customize the component.