Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

PasswordInput

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

ソース@yamada-ui/password-input

インポート

import { PasswordInput, PasswordInputStrengthMeter } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<PasswordInput placeholder="basic" />
Copied!

バリアントを変更する

編集可能な例

<VStack>
  <PasswordInput variant="outline" placeholder="outline" />
  <PasswordInput variant="filled" placeholder="filled" />
  <PasswordInput variant="flushed" placeholder="flushed" />
  <PasswordInput variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

サイズを変更する

編集可能な例

<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>
Copied!

デフォルトで値を表示する

デフォルトで値を表示する場合は、defaultVisibleをtrueに設定します。

編集可能な例

<PasswordInput
  defaultValue="password"
  defaultVisible
  placeholder="your password"
/>
Copied!

強度メーターを表示する

強度メーターを表示する場合は、PasswordInputStrengthMeterを使用します。

編集可能な例

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>
)
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <PasswordInput
    focusBorderColor="green.500"
    placeholder="custom border color"
  />
  <PasswordInput
    errorBorderColor="orange.500"
    isInvalid
    placeholder="custom border color"
  />
</VStack>
Copied!

プレースホルダーのカラーを変更する

プレースホルダーのカラーを変更する場合は、_placeholderにpropsを設定します。

編集可能な例

<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>
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<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>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<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>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

<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>
Copied!

制御する

編集可能な例

const [visible, setVisible] = useState(true)

return (
  <PasswordInput
    placeholder="your password"
    visible={visible}
    onVisibleChange={setVisible}
  />
)
Copied!

React Hook Formを使う

編集可能な例

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>
)
Copied!

GitHubでこのページを編集する

前NumberInput次PinInput