PasswordInput

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

<PasswordInput placeholder="Your Password" />

Usage

import { PasswordInput, StrengthMeter } from "@yamada-ui/react"

import { PasswordInput, StrengthMeter } from "@/components/ui"

import { PasswordInput, StrengthMeter } from "@workspaces/ui"

<PasswordInput />
<StrengthMeter />

Change Variants

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

Change Size

<VStack>
  <For each={["xs", "sm", "md", "lg"]}>
    {(size) => (
      <PasswordInput key={size} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>

Change Color Scheme

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <PasswordInput
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>

Default Visible

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

<PasswordInput
  defaultValue="password"
  defaultVisible
  placeholder="Your Password"
/>

Show Strength Meter

To display the strength meter, use 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>
)

If you use this code, you need to add "use client" to the top of the file.

Change Border Color

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

<VStack>
  <PasswordInput
    focusBorderColor="green.500"
    placeholder="Custom Border Color"
  />
  <PasswordInput
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom Border Color"
  />
</VStack>

Change Placeholder Color

To change the placeholder color, set _placeholder to the color.

<PasswordInput
  placeholder="Custom Placeholder"
  _placeholder={{ color: "blue.500" }}
/>

Disable

To disable, set disabled to true.

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        disabled
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

Read-Only

To make read-only, set readOnly to true.

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        readOnly
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

Invalid

To make invalid, set invalid to true.

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <PasswordInput
        key={variant}
        variant={variant}
        invalid
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

Customize Icon

To customize icons, set on and off of visibilityIcon to ReactNode.

<PasswordInput
  placeholder="Your Password"
  visibilityIcon={{ off: <SmileIcon />, on: <FrownIcon /> }}
/>

Control

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

If you use this code, you need to add "use client" to the top of the file.

Props

PasswordInput

Prop	Default	Type / Description
`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	Default	Type / Description
`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.

Accessibility

If you are not using Field.Root, set aria-label or aria-labelledby to PasswordInput.

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

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

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

ARIA Roles and Attributes

Component	Role and Attribute	Usage
`PasswordInputField`	`aria-invalid`	Set to `"true"` if `invalid` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
	`aria-describedby`	If `PasswordInput` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-required`	Set to `"true"` if `required` is set.
`PasswordInputButton`	`aria-label`	Sets `"Toggle password visibility"`.
`StrengthMeter`	`role="meter"`	Indicates that this is a meter.
	`aria-label`	Sets `"Password strength meter"`.
	`aria-valuemin`	Sets to `0`.
	`aria-valuemax`	Set to `max` value.
	`aria-valuenow`	Set to current value.