# Password input (UI SDK): Suggest a password

> A controller from `createPasswordInputController()` sets, shows, hides, clears and focuses the field from any button. Writes go through `onValueChange` like typing.

Canonical: https://hextaui.com/docs/ui-sdk-password-input/examples/controller

Component docs: https://hextaui.com/docs/ui-sdk-password-input

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-password-input-controller.json
```

This adds `components/examples/ui-sdk-password-input/controller.tsx` with the Password input component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-password-input/controller.tsx"
"use client"

import * as React from "react"
import { IconSparkles } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  PasswordInput,
  PasswordInputControl,
  PasswordInputGroup,
  PasswordInputStrength,
  PasswordInputToggle,
  createPasswordInputController,
} from "@/components/ui/ui-sdk-password-input"

const alphabet =
  "abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789-_!?"

function generatePassword(length = 20) {
  const bytes = crypto.getRandomValues(new Uint32Array(length))
  return Array.from(bytes, (byte) => alphabet[byte % alphabet.length]).join("")
}

function UiSdkPasswordInputController() {
  const [password] = React.useState(createPasswordInputController)

  return (
    <div className="flex w-full max-w-72 flex-col gap-2">
      <div className="flex items-center justify-between gap-2">
        <Label htmlFor="generated-password">New password</Label>
        <Button
          size="xs"
          variant="ghost"
          onClick={() => {
            password.setValue(generatePassword())
            password.setVisible(true)
            password.focus()
          }}
        >
          <IconSparkles aria-hidden="true" />
          Suggest
        </Button>
      </div>
      <PasswordInput controller={password} autoComplete="new-password">
        <PasswordInputGroup>
          <PasswordInputControl id="generated-password" />
          <PasswordInputToggle />
        </PasswordInputGroup>
        <PasswordInputStrength />
      </PasswordInput>
      <div className="flex gap-2 pt-1">
        <Button
          size="sm"
          variant="outline"
          onClick={() => password.toggleVisible()}
        >
          Toggle
        </Button>
        <Button size="sm" variant="ghost" onClick={() => password.clear()}>
          Clear
        </Button>
      </div>
    </div>
  )
}

export { UiSdkPasswordInputController }
```

## Props in this example

### PasswordInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `autoComplete` | `"current-password" \| "new-password" \| "off" \| string` | `"current-password"` |  |
| `controller` | `PasswordInputController` | – | From createPasswordInputController(). |

### PasswordInputControl

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | – |  |

## More Password input examples

- [New password](https://hextaui.com/docs/ui-sdk-password-input/examples/new-password)
- [Sign in](https://hextaui.com/docs/ui-sdk-password-input/examples/sign-in)
- [Shown at first](https://hextaui.com/docs/ui-sdk-password-input/examples/visible)
- [Controlled visibility](https://hextaui.com/docs/ui-sdk-password-input/examples/controlled)
- [Invalid](https://hextaui.com/docs/ui-sdk-password-input/examples/invalid)
- [Read-only](https://hextaui.com/docs/ui-sdk-password-input/examples/read-only)
- [Disabled](https://hextaui.com/docs/ui-sdk-password-input/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-password-input/examples/rtl)