Password Input

Used to collect passwords.

AI TipWant to skip the docs? Use the MCP Server

Setup

If you don't already have the snippet, run the following command to add the password-input snippet

npx @chakra-ui/cli snippet add password-input

The snippet includes a closed component composition for the PasswordInput component.

import {
  PasswordInput,
  PasswordStrengthMeter,
} from "@/components/ui/password-input"

<PasswordInput />
<PasswordStrengthMeter />

Use the size prop to change the size of the password input.

info

The password input sizes are mapped to the Input component sizes.

Use the value and onChange props to control the current page.

Here's an example of how to use the PasswordInput component with react-hook-form.

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

Password is hidden

Render the PasswordStrengthMeter component to show the strength of the password. Compute the value prop based on the password input value.

Low

Prop	Default	Type
`defaultVisible`	`false`	`boolean` The default visibility state of the password input.
`visible`		`boolean` The controlled visibility state of the password input.
`onVisibleChange`		`(visible: boolean) => void` Callback invoked when the visibility state changes.
`visibilityIcon`		`{ on: React.ReactNode; off: React.ReactNode }` Custom icons for the visibility toggle button.