PasswordInput
PasswordInput is a component that allows users to input passwords with a visibility toggle.
<PasswordInput placeholder="Your Password" />
Usage
import { PasswordInput, StrengthMeter } from "@yamada-ui/react"
import { PasswordInput, StrengthMeter } from "@/components/ui"
import { PasswordInput, StrengthMeter } from "@workspaces/ui"
<PasswordInput />
<StrengthMeter />
Change Variants
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Change Size
<VStack>
<For each={["xs", "sm", "md", "lg"]}>
{(size) => (
<PasswordInput key={size} size={size} placeholder={`Size (${size})`} />
)}
</For>
</VStack>
Change Color Scheme
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<PasswordInput
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
Default Visible
To display the value by default, set defaultVisible to true.
<PasswordInput
defaultValue="password"
defaultVisible
placeholder="Your Password"
/>
Show Strength Meter
To display the strength meter, use StrengthMeter.
Medium
const [value, setValue] = useState("Password")
const getStrength = (password: string): number => {
let strength = 0
if (password.length >= 8) strength++
if (/[A-Z]/.test(password)) strength++
if (/[0-9]/.test(password)) strength++
if (/[^A-Za-z0-9]/.test(password)) strength++
return strength
}
return (
<VStack>
<PasswordInput
placeholder="Your Password"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<StrengthMeter value={getStrength(value)} />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Border Color
To change the border color, set focusBorderColor or errorBorderColor to the color.
<VStack>
<PasswordInput
focusBorderColor="green.500"
placeholder="Custom Border Color"
/>
<PasswordInput
errorBorderColor="orange.500"
invalid
placeholder="Custom Border Color"
/>
</VStack>
Change Placeholder Color
To change the placeholder color, set _placeholder to the color.
<PasswordInput
placeholder="Custom Placeholder"
_placeholder={{ color: "blue.500" }}
/>
Disable
To disable, set disabled to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
disabled
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Read-Only
To make read-only, set readOnly to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
readOnly
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Invalid
To make invalid, set invalid to true.
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
invalid
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Customize Icon
To customize icons, set on and off of visibilityIcon to ReactNode.
<PasswordInput
placeholder="Your Password"
visibilityIcon={{ off: <SmileIcon />, on: <FrownIcon /> }}
/>
Control
Password visibility: show
const [visible, setVisible] = useState(true)
return (
<VStack>
<Text>Password visibility: {visible ? "show" : "hide"}</Text>
<PasswordInput
placeholder="Your Password"
visible={visible}
onVisibleChange={setVisible}
/>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
Currently, this section is being updated due to the migration of v2.