Password Input
The PasswordInput component is designed for secure and user-friendly password entry. It features an intuitive interface that allows users to input their passwords with optional visibility toggles to show or hide the password for convenience.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import PasswordInput from '@start-base/react-form-elements/PasswordInput';Usages
Password Input With Label
Password Input With Placeholder
Password Input With Placeholder And Label
Password Input With Placeholder And Label And Disable Shrink
Password Input Disabled
Password Input Error
Error Message
API
A password input component with options for prepending and appending elements.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| prepend | string or element | null | Prepend text to the input |
| appendClassName | string | null | Classname for append element |
| prependClassName | string | null | Classname for prepend element |