# Password Input

URL: https://ark-ui.com/docs/components/password-input
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/password-input.mdx

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

---

<ComponentPreview id="PasswordInput" />

## Anatomy

To set up the password input correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="password-input" />

## Examples

Learn how to use the `PasswordInput` component in your project. Let's take a look at the most basic example:

<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" />

### Root Provider

Use the `usePasswordInput` hook to create the password input store and pass it to the `PasswordInput.RootProvider`
component. This allows you to have maximum control over the password input programmatically.

<Example id="root-provider" />

### Field

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

<Example id="with-field" />

### Ignoring 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" />

### Controlled visibility

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

<Example id="controlled-visibility" />

### 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" />

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoComplete` | `'current-password' | 'new-password'` | No | The autocomplete attribute for the password input. |
| `defaultVisible` | `boolean` | No | The default visibility of the password input. |
| `disabled` | `boolean` | No | Whether the password input is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ input: string; visibilityTrigger: string }>` | No | The ids of the password input parts |
| `ignorePasswordManagers` | `boolean` | No | When `true`, the input will ignore password managers.

**Only works for the following password managers**
- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass |
| `invalid` | `boolean` | No | The invalid state of the password input. |
| `name` | `string` | No | The name of the password input. |
| `onVisibilityChange` | `(details: VisibilityChangeDetails) => void` | No | Function called when the visibility changes. |
| `readOnly` | `boolean` | No | Whether the password input is read only. |
| `required` | `boolean` | No | Whether the password input is required. |
| `translations` | `Partial<{ visibilityTrigger: ((visible: boolean) => string) | undefined }>` | No | The localized messages to use. |
| `visible` | `boolean` | No | Whether the password input is visible. |


**Root Data Attributes:**

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


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | The fallback content to display when the password is not visible. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePasswordInputReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Data Attributes:**

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


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoComplete` | `'current-password' | 'new-password'` | No | The autocomplete attribute for the password input. |
| `defaultVisible` | `boolean` | No | The default visibility of the password input. |
| `disabled` | `boolean` | No | Whether the password input is disabled. |
| `ids` | `Partial<{ input: string; visibilityTrigger: string }>` | No | The ids of the password input parts |
| `ignorePasswordManagers` | `boolean` | No | When `true`, the input will ignore password managers.

**Only works for the following password managers**
- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass |
| `invalid` | `boolean` | No | The invalid state of the password input. |
| `name` | `string` | No | The name of the password input. |
| `onVisibilityChange` | `(details: VisibilityChangeDetails) => void` | No | Function called when the visibility changes. |
| `readOnly` | `boolean` | No | Whether the password input is read only. |
| `required` | `boolean` | No | Whether the password input is required. |
| `translations` | `Partial<{ visibilityTrigger: ((visible: boolean) => string) | undefined }>` | No | The localized messages to use. |
| `visible` | `boolean` | No | Whether the password input is visible. |


**Root Data Attributes:**

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


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `number | boolean | Node | ArrayElement | (string & {})` | No | The fallback content to display when the password is not visible. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePasswordInputContext` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Data Attributes:**

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


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoComplete` | `'current-password' | 'new-password'` | No | The autocomplete attribute for the input |
| `defaultVisible` | `boolean` | No | Whether the password is visible by default |
| `disabled` | `boolean` | No | Whether the input is disabled |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ input: string; visibilityTrigger: string }>` | No | The ids of the elements in the password input. Useful for composition. |
| `ignorePasswordManagers` | `boolean` | No | Whether to ignore password managers |
| `invalid` | `boolean` | No | Whether the input is in an invalid state |
| `name` | `string` | No | The name attribute for the input |
| `readOnly` | `boolean` | No | Whether the input is read-only |
| `required` | `boolean` | No | Whether the input is required |
| `translations` | `Partial<{ visibilityTrigger: ((visible: boolean) => string) | undefined }>` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `visible` | `boolean` | No | Whether the password is visible |


**Root Data Attributes:**

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


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePasswordInputReturn` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `string` | No | The fallback content to display when the password is not visible. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PasswordInputApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**VisibilityTrigger Data Attributes:**

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


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoComplete` | `'current-password' | 'new-password'` | No | The autocomplete attribute for the password input. |
| `defaultVisible` | `boolean` | No | The default visibility of the password input. |
| `disabled` | `boolean` | No | Whether the password input is disabled. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ input: string; visibilityTrigger: string }>` | No | The ids of the password input parts |
| `ignorePasswordManagers` | `boolean` | No | When `true`, the input will ignore password managers.

**Only works for the following password managers**
- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass |
| `invalid` | `boolean` | No | The invalid state of the password input. |
| `name` | `string` | No | The name of the password input. |
| `onVisibilityChange` | `(details: VisibilityChangeDetails) => void` | No | Function called when the visibility changes. |
| `readOnly` | `boolean` | No | Whether the password input is read only. |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the password input is required. |
| `translations` | `Partial<{ visibilityTrigger: ((visible: boolean) => string) | undefined }>` | No | The localized messages to use. |
| `visible` | `boolean` | No | Whether the password input is visible. |


**Root Data Attributes:**

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


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UsePasswordInputContext]>` | No |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

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


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fallback` | `Snippet<[]>` | No | The fallback content to display when the password is not visible. |
| `ref` | `Element` | No |  |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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 Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePasswordInputReturn` | Yes |  |
| `ref` | `Element` | No |  |


**VisibilityTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**VisibilityTrigger Data Attributes:**

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


### Context

These are the properties available when using `UpasswordUinput.Context`, `useUpasswordUinputContext` hook or `useUpasswordUinput` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `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. |