Password Input
Used to collect passwords.
import { PasswordInput } from "@/components/ui/password-input"
const Demo = () => {
return <PasswordInput />
}
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-inputThe 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.
Input component sizes.import { Stack } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
const Demo = () => {
return (
<Stack maxW="300px">
<PasswordInput placeholder="xs" size="xs" />
<PasswordInput placeholder="sm" size="sm" />
<PasswordInput placeholder="md" size="md" />
<PasswordInput placeholder="lg" size="lg" />
</Stack>
)
}
Controlled
Use the value and onChange props to control the current page.
"use client"
import { PasswordInput } from "@/components/ui/password-input"
import { useState } from "react"
const Demo = () => {
const [value, setValue] = useState("")
return (
<PasswordInput value={value} onChange={(e) => setValue(e.target.value)} />
)
}
Hook Form
Here's an example of how to use the PasswordInput component with
react-hook-form.
"use client"
import { Button, Field, Input, Stack } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
import { useForm } from "react-hook-form"
interface FormValues {
username: string
password: string
}
const Demo = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>()
const onSubmit = handleSubmit((data) => console.log(data))
return (
<form onSubmit={onSubmit}>
<Stack gap="4" align="flex-start" maxW="sm">
<Field.Root invalid={!!errors.username}>
<Field.Label>Username</Field.Label>
<Input {...register("username")} />
<Field.ErrorText>{errors.username?.message}</Field.ErrorText>
</Field.Root>
<Field.Root invalid={!!errors.password}>
<Field.Label>Password</Field.Label>
<PasswordInput {...register("password")} />
<Field.ErrorText>{errors.password?.message}</Field.ErrorText>
</Field.Root>
<Button type="submit">Submit</Button>
</Stack>
</form>
)
}
Controlled Visibility
Use the visible and onVisibleChange props to control the visibility of the
password input.
Password is hidden
"use client"
import { Stack, Text } from "@chakra-ui/react"
import { PasswordInput } from "@/components/ui/password-input"
import { useState } from "react"
const Demo = () => {
const [visible, setVisible] = useState(false)
return (
<Stack>
<PasswordInput
defaultValue="secret"
visible={visible}
onVisibleChange={setVisible}
/>
<Text>Password is {visible ? "visible" : "hidden"}</Text>
</Stack>
)
}
Strength Indicator
Render the PasswordStrengthMeter component to show the strength of the
password. Compute the value prop based on the password input value.
import { Stack } from "@chakra-ui/react"
import {
PasswordInput,
PasswordStrengthMeter,
} from "@/components/ui/password-input"
const Demo = () => {
return (
<Stack maxW="300px">
<PasswordInput />
<PasswordStrengthMeter value={2} />
</Stack>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
defaultVisible | false | booleanThe default visibility state of the password input. |
visible | booleanThe controlled visibility state of the password input. | |
onVisibleChange | (visible: boolean) => voidCallback invoked when the visibility state changes. | |
visibilityIcon | { on: React.ReactNode; off: React.ReactNode }Custom icons for the visibility toggle button. |