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

PasswordInput

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`buttonProps`	-	`PasswordInputButtonProps` The props for the button element.
`defaultVisible`	`false`	`boolean` Determines whether the password input is visible by default.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`errorBorderColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The border color when the input is focused.
`htmlSize`	-	`number` The native HTML `size` attribute to be passed to the `input`.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`onVisibleChange`	-	`(visible: boolean) => void` Callback function that is triggered when the visibility of the password input changes.
`rootProps`	-	`InputGroup.RootProps` The props for the root element.
`visibilityIcon`	-	`{ off: ReactNode; on: ReactNode }` The icons to be used for the visibility toggle.
`visible`	`false`	`boolean` Determines the visibility of the password input.

StrengthMeter

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`value`	-	`number` The value of the password strength meter.
`getIndicatorProps`	-	`(percent: number) => IndicatorProps` The props of the password strength meter indicator.
`max`	`4`	`number` The maximum value of the password strength meter.
`withLabel`	`true`	`boolean` If `true`, the password strength meter will display the label.

アクセシビリティ

Field.Rootを使用しない場合は、PasswordInputにaria-labelまたはaria-labelledbyを設定します。

<PasswordInput aria-label="Your password" />

<VStack gap="sm">
  <Text as="h3" id="label">
    Your password
  </Text>

  <PasswordInput aria-labelledby="label" />
</VStack>

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`PasswordInputField`	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-describedby`	`PasswordInput`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`PasswordInputButton`	`aria-label`	`"パスワードの表示を切り替える"`を設定します。
`StrengthMeter`	`role="meter"`	メーターであることを示します。
	`aria-label`	`"パスワードの強度"`を設定します。
	`aria-valuemin`	`0`を設定します。
	`aria-valuemax`	`max`の値を設定します。
	`aria-valuenow`	現在の値を設定します。