---
id: password-input
title: Password Input
description: A component that allows users to enter secure text like (passwords and api keys)
---

<ComponentPreview id="PasswordInput" />

## Anatomy

<Anatomy id="password-input" />

```tsx
<PasswordInput.Root>
  <PasswordInput.Label />
  <PasswordInput.Control>
    <PasswordInput.Input />
    <PasswordInput.VisibilityTrigger>
      <PasswordInput.Indicator />
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>
```

## Examples

<Example id="basic" />

### Autocomplete

Use the `autoComplete` prop to manage autocompletion in the input.

- `new-password` — The user is creating a new password.
- `current-password` — The user is entering an existing password.

<Example id="autocomplete" />

### Controlled Visibility

Use the `visible` and `onVisibilityChange` props to control the visibility of the password input.

<Example id="controlled-visibility" />

### Root Provider

An alternative way to control the password input is to use the `RootProvider` component and the `usePasswordInput` hook.
This way you can access the state and methods from outside the component.

<Example id="root-provider" />

### Field

Here's an example of how to use the `PasswordInput` component with the `Field` component.

<Example id="with-field" />

### Password Managers

Use the `ignorePasswordManager` prop to ignore password managers like 1Password, LastPass, etc. This is useful for
non-login scenarios (e.g., "api keys", "secure notes", "temporary passwords")

> **Currently, this only works for 1Password, LastPass, Bitwarden, Dashlane, and Proton Pass.**

<Example id="ignore-password-manager" />

### Strength Meter

Combine the `PasswordInput` with a password strength library to show visual feedback about password strength. This
example uses the [`check-password-strength`](https://www.npmjs.com/package/check-password-strength) package to provide
real-time strength validation.

<Example id="strength-meter" />

### Validation

Combine with custom validation logic to show real-time feedback. Use the `invalid` prop to indicate validation errors.

<Example id="with-validation" />

## API Reference

### Props

<ComponentTypes id="password-input" />

### Context

<ContextType id="password-input" />
