# 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

<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: basic**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import styles from 'styles/password-input.module.css'

export const Basic = () => (
  <PasswordInput.Root className={styles.Root}>
    <PasswordInput.Label className={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control className={styles.Control}>
      <PasswordInput.Input className={styles.Input} />
      <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
        <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const Basic = () => (
  <PasswordInput.Root class={styles.Root}>
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import styles from 'styles/password-input.module.css'
</script>

<template>
  <PasswordInput.Root :class="styles.Root">
    <PasswordInput.Label :class="styles.Label">Password</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'
</script>

<PasswordInput.Root class={styles.Root}>
  <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input class={styles.Input} />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>

```

### 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: autocomplete**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import styles from 'styles/password-input.module.css'

export const Autocomplete = () => (
  <PasswordInput.Root className={styles.Root} autoComplete="new-password">
    <PasswordInput.Label className={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control className={styles.Control}>
      <PasswordInput.Input className={styles.Input} />
      <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
        <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const Autocomplete = () => (
  <PasswordInput.Root class={styles.Root} autoComplete="new-password">
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import styles from 'styles/password-input.module.css'
</script>

<template>
  <PasswordInput.Root :class="styles.Root" autoComplete="new-password">
    <PasswordInput.Label :class="styles.Label">Password</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'
</script>

<PasswordInput.Root class={styles.Root} autoComplete="new-password">
  <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input class={styles.Input} />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>

```

### Controlled Visibility

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

**Example: controlled-visibility**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/password-input.module.css'

export const ControlledVisibility = () => {
  const [visible, setVisible] = useState(false)
  return (
    <PasswordInput.Root className={styles.Root} visible={visible} onVisibilityChange={(e) => setVisible(e.visible)}>
      <PasswordInput.Label className={styles.Label}>Password is {visible ? 'visible' : 'hidden'}</PasswordInput.Label>
      <PasswordInput.Control className={styles.Control}>
        <PasswordInput.Input className={styles.Input} />
        <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
          <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/password-input.module.css'

export const ControlledVisibility = () => {
  const [visible, setVisible] = createSignal(false)
  return (
    <PasswordInput.Root class={styles.Root} visible={visible()} onVisibilityChange={(e) => setVisible(e.visible)}>
      <PasswordInput.Label class={styles.Label}>Password is {visible() ? 'visible' : 'hidden'}</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input class={styles.Input} />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/password-input.module.css'

const visible = ref(false)
</script>

<template>
  <PasswordInput.Root :class="styles.Root" v-model:visible="visible">
    <PasswordInput.Label :class="styles.Label">Password is {{ visible ? 'visible' : 'hidden' }}</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'

  let visible = $state(false)
</script>

<PasswordInput.Root class={styles.Root} bind:visible>
  <PasswordInput.Label class={styles.Label}>
    Password is {visible ? 'visible' : 'hidden'}
  </PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input class={styles.Input} />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>

```

### 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: root-provider**

#### React

```tsx
import { PasswordInput, usePasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import styles from 'styles/password-input.module.css'

export const RootProvider = () => {
  const passwordInput = usePasswordInput()

  return (
    <div className="stack">
      <output>password input is {passwordInput.visible ? 'visible' : 'hidden'}</output>
      <PasswordInput.RootProvider className={styles.Root} value={passwordInput}>
        <PasswordInput.Label className={styles.Label}>Password</PasswordInput.Label>
        <PasswordInput.Control className={styles.Control}>
          <PasswordInput.Input className={styles.Input} />
          <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
            <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
              <EyeIcon />
            </PasswordInput.Indicator>
          </PasswordInput.VisibilityTrigger>
        </PasswordInput.Control>
      </PasswordInput.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { PasswordInput, usePasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const RootProvider = () => {
  const passwordInput = usePasswordInput()

  return (
    <div class="stack">
      <output>password input is {passwordInput().visible ? 'visible' : 'hidden'}</output>
      <PasswordInput.RootProvider class={styles.Root} value={passwordInput}>
        <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
        <PasswordInput.Control class={styles.Control}>
          <PasswordInput.Input class={styles.Input} />
          <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
            <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
              <EyeIcon />
            </PasswordInput.Indicator>
          </PasswordInput.VisibilityTrigger>
        </PasswordInput.Control>
      </PasswordInput.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput, usePasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import styles from 'styles/password-input.module.css'

const passwordInput = usePasswordInput()
</script>

<template>
  <div class="stack">
    <output>password input is {{ passwordInput.visible ? 'visible' : 'hidden' }}</output>
    <PasswordInput.RootProvider :class="styles.Root" :value="passwordInput">
      <PasswordInput.Label :class="styles.Label">Password</PasswordInput.Label>
      <PasswordInput.Control :class="styles.Control">
        <PasswordInput.Input :class="styles.Input" />
        <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
          <PasswordInput.Indicator :class="styles.Indicator">
            <EyeIcon />
            <template #fallback>
              <EyeOffIcon />
            </template>
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput, usePasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'

  const id = $props.id()

  const passwordInput = usePasswordInput({ id })
</script>

<div class="stack">
  <output>password input is {passwordInput().visible ? 'visible' : 'hidden'}</output>
  <PasswordInput.RootProvider class={styles.Root} value={passwordInput}>
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator}>
          {#snippet fallback()}
            <EyeOffIcon />
          {/snippet}
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.RootProvider>
</div>

```

### Field

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

**Example: with-field**

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import field from 'styles/field.module.css'
import styles from 'styles/password-input.module.css'

export const WithField = () => (
  <Field.Root className={field.Root}>
    <PasswordInput.Root className={styles.Root}>
      <PasswordInput.Label className={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control className={styles.Control}>
        <PasswordInput.Input className={styles.Input} />
        <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
          <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
    <Field.HelperText className={field.HelperText}>Enter your password</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Password is required</Field.ErrorText>
  </Field.Root>
)

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import field from 'styles/field.module.css'
import styles from 'styles/password-input.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <PasswordInput.Root class={styles.Root}>
      <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input class={styles.Input} />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
    <Field.HelperText class={field.HelperText}>Enter your password</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Password is required</Field.ErrorText>
  </Field.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import field from 'styles/field.module.css'
import styles from 'styles/password-input.module.css'
</script>

<template>
  <Field.Root :class="field.Root">
    <PasswordInput.Root :class="styles.Root">
      <PasswordInput.Label :class="styles.Label">Password</PasswordInput.Label>
      <PasswordInput.Control :class="styles.Control">
        <PasswordInput.Input :class="styles.Input" />
        <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
          <PasswordInput.Indicator :class="styles.Indicator">
            <EyeIcon />
            <template #fallback>
              <EyeOffIcon />
            </template>
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
    </PasswordInput.Root>
    <Field.HelperText :class="field.HelperText">Enter your password</Field.HelperText>
    <Field.ErrorText :class="field.ErrorText">Password is required</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import field from 'styles/field.module.css'
  import styles from 'styles/password-input.module.css'
</script>

<Field.Root class={field.Root}>
  <PasswordInput.Root class={styles.Root}>
    <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator}>
          {#snippet fallback()}
            <EyeOffIcon />
          {/snippet}
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
  <Field.HelperText class={field.HelperText}>Enter your password</Field.HelperText>
  <Field.ErrorText class={field.ErrorText}>Password is required</Field.ErrorText>
</Field.Root>

```

### 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: ignore-password-manager**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import styles from 'styles/password-input.module.css'

export const IgnorePasswordManager = () => (
  <PasswordInput.Root className={styles.Root} ignorePasswordManagers>
    <PasswordInput.Label className={styles.Label}>API Key</PasswordInput.Label>
    <PasswordInput.Control className={styles.Control}>
      <PasswordInput.Input className={styles.Input} defaultValue="spd_1234567890" />
      <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
        <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import styles from 'styles/password-input.module.css'

export const IgnorePasswordManager = () => (
  <PasswordInput.Root class={styles.Root} ignorePasswordManagers>
    <PasswordInput.Label class={styles.Label}>API Key</PasswordInput.Label>
    <PasswordInput.Control class={styles.Control}>
      <PasswordInput.Input class={styles.Input} value="spd_1234567890" />
      <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
        <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
          <EyeIcon />
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import styles from 'styles/password-input.module.css'
</script>

<template>
  <PasswordInput.Root :class="styles.Root" ignorePasswordManagers>
    <PasswordInput.Label :class="styles.Label">API Key</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" value="spd_1234567890" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'
</script>

<PasswordInput.Root class={styles.Root} ignorePasswordManagers>
  <PasswordInput.Label class={styles.Label}>API Key</PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input class={styles.Input} value="spd_1234567890" />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
</PasswordInput.Root>

```

### 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: strength-meter**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { passwordStrength, type Options } from 'check-password-strength'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useMemo, useState } from 'react'
import styles from 'styles/password-input.module.css'

const strengthOptions: Options<string> = [
  { id: 0, value: 'weak', minDiversity: 0, minLength: 0 },
  { id: 1, value: 'medium', minDiversity: 2, minLength: 6 },
  { id: 2, value: 'strong', minDiversity: 4, minLength: 8 },
]

export const StrengthMeter = () => {
  const [password, setPassword] = useState('asdfasdf')

  const strength = useMemo(() => {
    if (!password) return null
    const { value } = passwordStrength(password, strengthOptions)
    return value
  }, [password])

  return (
    <PasswordInput.Root className={styles.Root}>
      <PasswordInput.Label className={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control className={styles.Control}>
        <PasswordInput.Input
          className={styles.Input}
          value={password}
          onChange={(e) => setPassword(e.currentTarget.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
          <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      {strength && (
        <div className={styles.StrengthMeter}>
          <div className={styles.StrengthBar}>
            <div className={styles.StrengthFill} data-strength={strength} />
          </div>
          <div className={styles.StrengthLabel}>{strength} password</div>
        </div>
      )}
    </PasswordInput.Root>
  )
}

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { passwordStrength, type Options } from 'check-password-strength'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createMemo, createSignal, Show } from 'solid-js'
import styles from 'styles/password-input.module.css'

const strengthOptions: Options<string> = [
  { id: 0, value: 'weak', minDiversity: 0, minLength: 0 },
  { id: 1, value: 'medium', minDiversity: 2, minLength: 6 },
  { id: 2, value: 'strong', minDiversity: 4, minLength: 8 },
]

export const StrengthMeter = () => {
  const [password, setPassword] = createSignal('asdfasdf')

  const strength = createMemo(() => {
    if (!password()) return null
    const { value } = passwordStrength(password(), strengthOptions)
    return value
  })

  return (
    <PasswordInput.Root class={styles.Root}>
      <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input
          class={styles.Input}
          value={password()}
          onInput={(e) => setPassword(e.currentTarget.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      <Show when={strength()}>
        {(value) => (
          <div class={styles.StrengthMeter}>
            <div class={styles.StrengthBar}>
              <div class={styles.StrengthFill} data-strength={value()} />
            </div>
            <div class={styles.StrengthLabel}>{value()} password</div>
          </div>
        )}
      </Show>
    </PasswordInput.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { passwordStrength, type Options } from 'check-password-strength'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import styles from 'styles/password-input.module.css'

const strengthOptions: Options<string> = [
  { id: 0, value: 'weak', minDiversity: 0, minLength: 0 },
  { id: 1, value: 'medium', minDiversity: 2, minLength: 6 },
  { id: 2, value: 'strong', minDiversity: 4, minLength: 8 },
]

const password = ref('asdfasdf')

const strength = computed(() => {
  if (!password.value) return null
  const { value } = passwordStrength(password.value, strengthOptions)
  return value
})
</script>

<template>
  <PasswordInput.Root :class="styles.Root">
    <PasswordInput.Label :class="styles.Label">Password</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" v-model="password" placeholder="Enter your password" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
    <div v-if="strength" :class="styles.StrengthMeter">
      <div :class="styles.StrengthBar">
        <div :class="styles.StrengthFill" :data-strength="strength" />
      </div>
      <div :class="styles.StrengthLabel">{{ strength }} password</div>
    </div>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { passwordStrength, type Options } from 'check-password-strength'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'

  const strengthOptions: Options<string> = [
    { id: 0, value: 'weak', minDiversity: 0, minLength: 0 },
    { id: 1, value: 'medium', minDiversity: 2, minLength: 6 },
    { id: 2, value: 'strong', minDiversity: 4, minLength: 8 },
  ]

  let password = $state('asdfasdf')

  const strength = $derived.by(() => {
    if (!password) return null
    const { value } = passwordStrength(password, strengthOptions)
    return value
  })
</script>

<PasswordInput.Root class={styles.Root}>
  <PasswordInput.Label class={styles.Label}>Password</PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input class={styles.Input} bind:value={password} placeholder="Enter your password" />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
  {#if strength}
    <div class={styles.StrengthMeter}>
      <div class={styles.StrengthBar}>
        <div class={styles.StrengthFill} data-strength={strength}></div>
      </div>
      <div class={styles.StrengthLabel}>{strength} password</div>
    </div>
  {/if}
</PasswordInput.Root>

```

### Validation

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

**Example: with-validation**

#### React

```tsx
import { PasswordInput } from '@ark-ui/react/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useMemo, useState } from 'react'
import styles from 'styles/password-input.module.css'

export const WithValidation = () => {
  const [password, setPassword] = useState('')
  const isValid = useMemo(() => password.length >= 8, [password])

  return (
    <PasswordInput.Root className={styles.Root} invalid={!isValid && password.length > 0}>
      <PasswordInput.Label className={styles.Label}>Password (min 8 characters)</PasswordInput.Label>
      <PasswordInput.Control className={styles.Control}>
        <PasswordInput.Input
          className={styles.Input}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger className={styles.VisibilityTrigger}>
          <PasswordInput.Indicator className={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      {password.length > 0 && !isValid && (
        <p className={styles.ValidationMessage} data-valid="false">
          Password must be at least 8 characters
        </p>
      )}
      {isValid && password.length > 0 && (
        <p className={styles.ValidationMessage} data-valid="true">
          Password is valid
        </p>
      )}
    </PasswordInput.Root>
  )
}

```

#### Solid

```tsx
import { PasswordInput } from '@ark-ui/solid/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-solid'
import { createMemo, createSignal } from 'solid-js'
import styles from 'styles/password-input.module.css'

export const WithValidation = () => {
  const [password, setPassword] = createSignal('')
  const isValid = createMemo(() => password().length >= 8)

  return (
    <PasswordInput.Root class={styles.Root} invalid={!isValid() && password().length > 0}>
      <PasswordInput.Label class={styles.Label}>Password (min 8 characters)</PasswordInput.Label>
      <PasswordInput.Control class={styles.Control}>
        <PasswordInput.Input
          class={styles.Input}
          onInput={(e) => setPassword(e.currentTarget.value)}
          placeholder="Enter your password"
        />
        <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
          <PasswordInput.Indicator class={styles.Indicator} fallback={<EyeOffIcon />}>
            <EyeIcon />
          </PasswordInput.Indicator>
        </PasswordInput.VisibilityTrigger>
      </PasswordInput.Control>
      {password().length > 0 && !isValid() && (
        <p class={styles.ValidationMessage} data-valid="false">
          Password must be at least 8 characters
        </p>
      )}
      {isValid() && password().length > 0 && (
        <p class={styles.ValidationMessage} data-valid="true">
          Password is valid
        </p>
      )}
    </PasswordInput.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { PasswordInput } from '@ark-ui/vue/password-input'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import styles from 'styles/password-input.module.css'

const password = ref('')
const isValid = computed(() => password.value.length >= 8)
</script>

<template>
  <PasswordInput.Root :class="styles.Root" :invalid="!isValid && password.length > 0">
    <PasswordInput.Label :class="styles.Label">Password (min 8 characters)</PasswordInput.Label>
    <PasswordInput.Control :class="styles.Control">
      <PasswordInput.Input :class="styles.Input" v-model="password" placeholder="Enter your password" />
      <PasswordInput.VisibilityTrigger :class="styles.VisibilityTrigger">
        <PasswordInput.Indicator :class="styles.Indicator">
          <EyeIcon />
          <template #fallback>
            <EyeOffIcon />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
    <p v-if="password.length > 0 && !isValid" :class="styles.ValidationMessage" data-valid="false">
      Password must be at least 8 characters
    </p>
    <p v-if="isValid && password.length > 0" :class="styles.ValidationMessage" data-valid="true">Password is valid</p>
  </PasswordInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PasswordInput } from '@ark-ui/svelte/password-input'
  import { EyeIcon, EyeOffIcon } from 'lucide-svelte'
  import styles from 'styles/password-input.module.css'

  let password = $state('')
  let isValid = $derived(password.length >= 8)
</script>

<PasswordInput.Root class={styles.Root} invalid={!isValid && password.length > 0}>
  <PasswordInput.Label class={styles.Label}>Password (min 8 characters)</PasswordInput.Label>
  <PasswordInput.Control class={styles.Control}>
    <PasswordInput.Input
      class={styles.Input}
      oninput={(e) => (password = e.currentTarget.value)}
      placeholder="Enter your password"
    />
    <PasswordInput.VisibilityTrigger class={styles.VisibilityTrigger}>
      <PasswordInput.Indicator class={styles.Indicator}>
        {#snippet fallback()}
          <EyeOffIcon />
        {/snippet}
        <EyeIcon />
      </PasswordInput.Indicator>
    </PasswordInput.VisibilityTrigger>
  </PasswordInput.Control>
  {#if password.length > 0 && !isValid}
    <p class={styles.ValidationMessage} data-valid="false">Password must be at least 8 characters</p>
  {/if}
  {#if isValid && password.length > 0}
    <p class={styles.ValidationMessage} data-valid="true">Password is valid</p>
  {/if}
</PasswordInput.Root>

```

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

**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. |