Password Input

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.

Usage

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

<PasswordInput />
<PasswordStrengthMeter />

Examples

Sizes

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

:::info

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

:::

Controlled

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

Hook Form

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

Controlled Visibility

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

Strength Indicator

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

Props

Root