Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

PasswordInput

PasswordInput is a component that allows users to input passwords with a visibility toggle.

Source@yamada-ui/password-input

Import

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

Usage

Editable example

<PasswordInput placeholder="basic" />
Copied!

Change Variants

Editable example

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

Change Size

Editable example

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

Default Visible

To display the value by default, set defaultVisible to true.

Editable example

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

Show Strength Meter

To display the strength meter, use PasswordInputStrengthMeter.

Editable example

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!

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

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

Change Placeholder Color

To change the placeholder color, set props to _placeholder.

Editable example

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

Disable

To disable, set isDisabled to true.

Editable example

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

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

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

Control

Editable example

const [visible, setVisible] = useState(true)

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

Use React Hook Form

Editable example

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!

Edit this page on GitHub

PreviousNumberInputNextPinInput