PasswordInput
PasswordInput
is a component that allows users to input passwords with a visibility toggle.
Import
import { PasswordInput, PasswordInputStrengthMeter } from "@yamada-ui/react"
Usage
Editable example
<PasswordInput placeholder="basic" />
Change Variants
Editable example
<VStack> <PasswordInput variant="outline" placeholder="outline" /> <PasswordInput variant="filled" placeholder="filled" /> <PasswordInput variant="flushed" placeholder="flushed" /> <PasswordInput variant="unstyled" placeholder="unstyled" /> </VStack>
Change Size
Editable example
<VStack> <PasswordInput size="xs" placeholder="extra small size" /> <PasswordInput size="sm" placeholder="small size" /> <PasswordInput size="md" placeholder="medium size" /> <PasswordInput size="lg" placeholder="large size" /> </VStack>
Default Visible
To display the value by default, set defaultVisible
to true
.
Editable example
<PasswordInput defaultValue="password" defaultVisible placeholder="your password" />
Show Strength Meter
To display the strength meter, use PasswordInputStrengthMeter
.
Editable example
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)} /> <PasswordInputStrengthMeter value={getStrength(value)} /> </VStack> )
Change Border Color
To change the border color, set a color to focusBorderColor
or errorBorderColor
.
Editable example
<VStack> <PasswordInput focusBorderColor="green.500" placeholder="custom border color" /> <PasswordInput errorBorderColor="orange.500" isInvalid placeholder="custom border color" /> </VStack>
Change Placeholder Color
To change the placeholder color, set props
to _placeholder
.
Editable example
<VStack> <PasswordInput placeholder="custom placeholder" _placeholder={{ opacity: 1, color: "blue.500" }} _dark={{ _placeholder: { opacity: 1, color: "blue.500" } }} /> <PasswordInput color="green.500" placeholder="custom placeholder" _placeholder={{ color: "inherit" }} _dark={{ _placeholder: { color: "inherit" }, }} /> </VStack>
Disable
To disable, set isDisabled
to true
.
Editable example
<VStack> <PasswordInput variant="outline" isDisabled placeholder="outline" /> <PasswordInput variant="filled" isDisabled placeholder="filled" /> <PasswordInput variant="flushed" isDisabled placeholder="flushed" /> <PasswordInput variant="unstyled" isDisabled placeholder="unstyled" /> <FormControl helperMessage="We'll never share your password." isDisabled label="Password" > <PasswordInput placeholder="your password" /> </FormControl> </VStack>
Make Read-Only
To make read-only, set isReadOnly
to true
.
Editable example
<VStack> <PasswordInput variant="outline" isReadOnly placeholder="outline" /> <PasswordInput variant="filled" isReadOnly placeholder="filled" /> <PasswordInput variant="flushed" isReadOnly placeholder="flushed" /> <PasswordInput variant="unstyled" isReadOnly placeholder="unstyled" /> <FormControl helperMessage="We'll never share your password." isReadOnly label="Password" > <PasswordInput placeholder="your password" /> </FormControl> </VStack>
Make Input Invalid
To make the input invalid, set isInvalid
to true
.
Editable example
<VStack> <PasswordInput variant="outline" isInvalid placeholder="outline" /> <PasswordInput variant="filled" isInvalid placeholder="filled" /> <PasswordInput variant="flushed" isInvalid placeholder="flushed" /> <PasswordInput variant="unstyled" isInvalid placeholder="unstyled" /> <FormControl errorMessage="Email is required." isInvalid label="Password"> <PasswordInput placeholder="your password" /> </FormControl> </VStack>
Control
Editable example
const [visible, setVisible] = useState(true) return ( <PasswordInput placeholder="your password" visible={visible} onVisibleChange={setVisible} /> )
Use React Hook Form
Editable example
type Data = { password: string } const { register, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => { console.log("submit:", data) } console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl errorMessage={errors.password?.message} isInvalid={!!errors.password} label="Password" > <PasswordInput {...register("password", { required: { message: "Password is required.", value: true }, })} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
Edit this page on GitHub