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, Input, Stack } from "@chakra-ui/react"
import { Field } from "@/components/ui/field"
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
label="Username"
invalid={!!errors.username}
errorText={errors.username?.message}
>
<Input
{...register("username", { required: "Username is required" })}
/>
</Field>
<Field
label="Password"
invalid={!!errors.password}
errorText={errors.password?.message}
>
<PasswordInput
{...register("password", { required: "Password is required" })}
/>
</Field>
<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. |