---
title: PasswordInput
description: "`PasswordInput` is a component that allows users to input passwords with a visibility toggle."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/password-input/password-input.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/password-input
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-passwordinput--basic
---

```tsx
<PasswordInput placeholder="Your Password" />
```

## Usage

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

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

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

```tsx
<PasswordInput />
<StrengthMeter />
```

### Change Variants

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

### Change Size

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

### Change Color Scheme

```tsx
<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`.

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

### Show Strength Meter

To display the strength meter, use `StrengthMeter`.

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

### Change Border Color

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

```tsx
<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.

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

### Disable

To disable, set `disabled` to `true`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

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

### Control

```tsx
const [visible, setVisible] = useState(true)

return (
  <VStack>
    <Text>Password visibility: {visible ? "show" : "hide"}</Text>

    <PasswordInput
      placeholder="Your Password"
      visible={visible}
      onVisibleChange={setVisible}
    />
  </VStack>
)
```

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

Currently, this section is being updated due to the migration of v2.