密码输入
用于收集密码。
import { PasswordInput } from "@/components/ui/password-input"
const Demo = () => {
return <PasswordInput />
}
设置
¥Setup
如果你还没有该代码片段，请运行以下命令添加 password-input 代码片段。
¥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该代码片段包含 PasswordInput 组件的封闭组件组合。
¥The snippet includes a closed component composition for the PasswordInput
component.
用法
¥Usage
import {
PasswordInput,
PasswordStrengthMeter,
} from "@/components/ui/password-input"<PasswordInput />
<PasswordStrengthMeter />示例
¥Examples
尺寸
¥Sizes
使用 size 属性更改密码输入框的大小。
¥Use the size prop to change the size of the password input.
密码输入框大小映射到 Input 组件大小。
¥The password input sizes are mapped to the 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
使用 value 和 onChange 属性控制当前页面。
¥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
以下是如何将 PasswordInput 组件与 react-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
使用 visible 和 onVisibleChange 属性控制密码输入框的可见性。
¥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
渲染 PasswordStrengthMeter 组件，显示密码强度。根据密码输入 value 计算 value 属性。
¥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. |