# @leafygreen-ui/password-input > leafyGreen UI Kit Password Input Latest version **5.0.9** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/password-input pnpm add @leafygreen-ui/password-input yarn add @leafygreen-ui/password-input bun add @leafygreen-ui/password-input ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.9 | | Published | 2026-01-21 | | First published | 2023-02-24 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 251.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 273 | | Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/password-input - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/password-input - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/password-input ## Dependencies (10) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0 - [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.5 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.8.0 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.1 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2 - [@leafygreen-ui/form-field](https://npm.io/package/@leafygreen-ui/form-field.md) ^4.0.9 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.4 - [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.5 ## Recent versions - 5.0.9 (latest) — 2026-01-21 - 1.0.9 (beta) — 2023-07-26 - 2.0.0-alpha.1 (alpha) — 2023-07-20 - 1.0.7-next.7 (next) — 2023-05-26 - 5.0.8 — 2025-11-24 - 5.0.7 — 2025-11-13 - 5.0.6 — 2025-10-31 - 5.0.5 — 2025-10-21 - 5.0.4 — 2025-09-25 - 5.0.3 — 2025-09-10 - 5.0.2 — 2025-09-03 - 5.0.1 — 2025-07-03 - 5.0.0 — 2025-06-30 - 4.0.1 — 2025-06-16 - 4.0.0 — 2025-05-29 - … 46 more at https://npm.io/package/@leafygreen-ui/password-input/versions ## README # Password Input ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/password-input.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/password-input/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/password-input ``` ### Yarn ```shell yarn add @leafygreen-ui/password-input ``` ### NPM ```shell npm install @leafygreen-ui/password-input ``` ## Example ```js import { PasswordInput } from '@leafygreen-ui/password-input'; // Multiple notifications console.log('onChange callback')} />; ``` ```js // Single notification ``` ```js // Custom notification
``` ```js // General notification ``` ## Properties | Prop | Type | Description | Default | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `id` | `string` | id associated with the password input. | | | `label` | `string` | Text shown above the password input. | | | `value` | `string` | The controlled value of the password input. | | | `disabled` | `boolean` | Disables the password input but still allows you to toggle password visibility. | `false` | | `onChange` | `function` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. | | `onBlur` | `function` | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | | | `placeholder` | `string` | The placeholder text shown in the input field before the user begins typing. | | | `autoComplete` | `string` | Specifies what permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. More info can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). | `new-password` | | `size` | `'small'` \| `'default'` \| `'large'` | Determines the size of the input. | `default` | | `errorMessage` | `string` | Error message that appears below the input. Renders only if `aria-disabledby=undefined` and (`stateNotifications='error'` or `stateNotifications='warning'`) | `'This input needs your attention'` | | `successMessage` | `string` | Success message that appears below the input. Renders only if `aria-disabledby=undefined` and `stateNotifications='valid'` | `'Success'` | | `stateNotifications` | `Array<{notification: string; state: 'error' \| 'warning' \| 'valid' \| 'none'}>`

or

`'error'` \| `'warning'` \| `'valid'` \| `'none'` | Determines what notifications will appear below the password input.

The array determines the overall input state. If at least one object has `'error'` \| `'warning'` as the `state` value, the input will display a red outline. If all objects have `valid` as the `state` value, then the input will display a green outline. If none of the conditions above are met, then the input will display a default state.

To use a custom error notification container rather than the default provided in this component, `stateNotifications` will only require a string with the appropriate `state` value. In addition, the `aria-describedby` attribute must be provided with the id of the custom notification container. You can read more about `aria-describedby` [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby). | `[]` | | `className` | `string` | The className passed to the root element of the component. | | | ... | native `input` attributes | Any other props will be spread on the root `input` element | | ## States ```js const State = { Error: 'error', // red x icon, red text Warning: 'warning', // red warning icon, red text Valid: 'valid', // green checkmark, black text None: 'none', // gray checkmark, gray text } as const; ``` ### Validation Feedback Password input has 3 different supported options for validation feedback: 1. Pass the id of a custom notification as the `aria-describedby` prop and pass a `state` value string as the `stateNotifications` prop to link a custom notification to the password input. 2. Pass an array of notifications as the `stateNotifications` prop for cases where multiple notifications may need to render. `aria-describedby` prop must be undefined in this case. 3. Pass a `state` value string and pass a string to the `errorMessage` prop or `successMessage` prop for cases where only a single notification will ever render. `aria-describedby` prop must be undefined and `stateNotifications` prop must be a string in this case. ## Special Case ### Aria Labels Either `label` or `aria-labelledby` or `aria-label` must be provided a string, or there will be a console error. This is to ensure that screenreaders have a description for what the PAssword Input does. ### Aria Describedby To use a custom error notification container rather than the state notifications array or default error or success message provided in this component, `stateNotifications` requires a string with the appropriate `state` value. In addition, the `aria-describedby` attribute must be provided with the id of the custom notification container. You can read more about `aria-describedby` [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby). --- _Source: https://npm.io/package/@leafygreen-ui/password-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._