PasswordInput
PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。
<PasswordInput placeholder="Your Password" />
使い方
import { PasswordInput, StrengthMeter } from "@yamada-ui/react"
import { PasswordInput, StrengthMeter } from "@/components/ui"
import { PasswordInput, StrengthMeter } from "@workspaces/ui"
<PasswordInput />
<StrengthMeter />
バリアントを変更する
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["xs", "sm", "md", "lg"]}>
{(size) => (
<PasswordInput key={size} size={size} placeholder={`Size (${size})`} />
)}
</For>
</VStack>
カラースキームを変更する
<VStack>
<For each={["success", "warning"]}>
{(colorScheme) => (
<PasswordInput
key={colorScheme}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
デフォルトで値を表示する
デフォルトで値を表示する場合は、defaultVisibleをtrueに設定します。
<PasswordInput
defaultValue="password"
defaultVisible
placeholder="Your Password"
/>
強度メーターを表示する
強度メーターを表示する場合は、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>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。ボーダーの色を変更する
ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。
<VStack>
<PasswordInput
focusBorderColor="green.500"
placeholder="Custom Border Color"
/>
<PasswordInput
errorBorderColor="orange.500"
invalid
placeholder="Custom Border Color"
/>
</VStack>
プレースホルダーのカラーを変更する
プレースホルダーのカラーを変更する場合は、_placeholderに値を設定します。
<PasswordInput
placeholder="Custom Placeholder"
_placeholder={{ color: "blue.500" }}
/>
無効にする
無効化にする場合は、disabledをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
disabled
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
readOnly
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
無効な入力にする
無効な入力にする場合は、invalidをtrueに設定します。
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => (
<PasswordInput
key={variant}
variant={variant}
invalid
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、visibilityIconのonとoffにReactNodeを設定します。
<PasswordInput
placeholder="Your Password"
visibilityIcon={{ off: <SmileIcon />, on: <FrownIcon /> }}
/>
制御する
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>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。