# Password Input

A password field with a show/hide button and a strength meter.

Group: Forms

## Import

```tsx
import { PasswordInput, PasswordStrengthMeter, passwordStrength } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function PasswordInputDemo() {
  const [pw, setPw] = useState("")
  return (
    <Stack maxW="xs" gap="3">
      <PasswordInput placeholder="Kata sandi" value={pw} onChange={(e) => setPw(e.target.value)} />
      <PasswordStrengthMeter value={passwordStrength(pw)} />
    </Stack>
  )
}
```

## Props

### PasswordInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `visible` | `boolean` |  |  |
| `defaultVisible` | `boolean` |  |  |
| `onVisibleChange` | `(visible: boolean) => void` |  |  |
| `visibilityIcon` | `{ on: React.ReactNode; off: React.ReactNode }` |  | Custom icons for the toggle button. |

### PasswordStrengthMeter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `number` |  | 0–4, usually from `passwordStrength()`. |
| `max` | `number` |  |  |

`*` = required. Style props and HTML attributes are accepted too.