Password Input

A component that allows users to enter secure text like (passwords and api keys)

Password

Anatomy

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

Examples

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.

Controlled Visibility

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

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.

Field

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

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.

Strength Meter

Combine the PasswordInput with a password strength library to show visual feedback about password strength. This example uses the check-password-strength package to provide real-time strength validation.

Validation

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

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`autoComplete`	`'current-password'`	`'current-password' \| 'new-password'` The autocomplete attribute for the password input.
`defaultVisible`		`boolean` The default visibility of the password input.
`disabled`		`boolean` Whether the password input is disabled.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ input: string; visibilityTrigger: string }>` The ids of the password input parts
`ignorePasswordManagers`		`boolean` When `true`, the input will ignore password managers. Only works for the following password managers - 1Password, LastPass, Bitwarden, Dashlane, Proton Pass
`invalid`		`boolean` The invalid state of the password input.
`name`		`string` The name of the password input.
`onVisibilityChange`		`(details: VisibilityChangeDetails) => void` Function called when the visibility changes.
`readOnly`		`boolean` Whether the password input is read only.
`required`		`boolean` Whether the password input is required.
`translations`		`Partial<{ visibilityTrigger: ((visible: boolean) => string) \| undefined }>` The localized messages to use.
`visible`		`boolean` Whether the password input is visible.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	root
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-readonly]`	Present when read-only

Control

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	control
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-readonly]`	Present when read-only

Indicator

Renders a <span> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`fallback`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The fallback content to display when the password is not visible.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	indicator
`[data-state]`	"visible" \| "hidden"
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-readonly]`	Present when read-only

Input

Renders a <input> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	input
`[data-state]`	"visible" \| "hidden"
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-readonly]`	Present when read-only

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	label
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid
`[data-readonly]`	Present when read-only
`[data-required]`	Present when required

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UsePasswordInputReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

VisibilityTrigger

Renders a <button> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	password-input
`[data-part]`	visibility-trigger
`[data-readonly]`	Present when read-only
`[data-disabled]`	Present when disabled
`[data-state]`	"visible" \| "hidden"

Context

API

Property	Type
`visible`	`boolean` Whether the password input is visible.
`disabled`	`boolean` Whether the password input is disabled.
`invalid`	`boolean` Whether the password input is invalid.
`focus`	`VoidFunction` Focus the password input.
`setVisible`	`(value: boolean) => void` Set the visibility of the password input.
`toggleVisible`	`VoidFunction` Toggle the visibility of the password input.