密码输入框
用于收集密码。
import { PasswordInput } from "@/components/ui/password-input"
const Demo = () => {
return <PasswordInput />
}
设置
如果您还没有该代码片段，请运行以下命令添加password-input 片段
npx @chakra-ui/cli snippet add password-input该代码片段包含 PasswordInput 组件的封闭组件组合。
用法
import {
PasswordInput,
PasswordStrengthMeter,
} from "@/components/ui/password-input"<PasswordInput />
<PasswordStrengthMeter />示例
尺寸
使用 size prop 来改变密码输入框的尺寸。
信息
密码输入框的尺寸映射到 Input 组件的尺寸。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>
)
}
受控
使用 value 和 onChange props 来控制当前页。
"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 结合使用的示例。
"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>
)
}
受控可见性
使用 visible 和 onVisibleChange props 来控制密码输入框的可见性。
密码是隐藏
"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>
)
}
强度指示器
渲染 PasswordStrengthMeter 组件以显示密码强度。根据密码输入框的 value 计算 value prop。
中等
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>
)
}
属性
根
| 属性 | 默认值 | 类型 |
|---|---|---|
defaultVisible | false | boolean密码输入框的默认可见性状态。 |
visible | boolean密码输入框的受控可见性状态。 | |
onVisibleChange | (visible: boolean) => void当可见性状态改变时调用的回调函数。 | |
visibilityIcon | { on: React.ReactNode; off: React.ReactNode }可见性切换按钮的自定义图标。 |