Password input (UI SDK): Read-only

A read-only field can be focused, shown and copied, but not changed, and still submits.

Recovery key

You can show it, but not change it.

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

function UiSdkPasswordInputReadOnly() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="recovery-key">Recovery key</Label>
      <PasswordInput readOnly defaultValue="7Hq2-vX9p-Lm4c" autoComplete="off">
        <PasswordInputGroup>
          <PasswordInputControl id="recovery-key" />
          <PasswordInputToggle aria-label="Show recovery key" />
        </PasswordInputGroup>
      </PasswordInput>
      <p className="m-0 text-xs text-muted-foreground">
        You can show it, but not change it.
      </p>
    </div>
  )
}

export { UiSdkPasswordInputReadOnly }

Add this example

This adds the example as components/examples/ui-sdk-password-input/read-only.tsx, together with the Password input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-password-input-read-only.json

To add only the component, follow the Password input installation.

Props in this example

The Password input props this example sets, from the API reference.

PasswordInput

Prop	Type	Default
`defaultValue`	`string`	`–`
`autoComplete`	`"current-password" \| "new-password" \| "off" \| string`	`"current-password"`
`readOnly`	`boolean`	`false`

PasswordInputControl

Prop	Type	Default
`id`	`string`	`–`

PasswordInputToggle

Prop	Type	Default
`aria-label`	`string`	`"Show password"`

Every prop is in the Password input API reference.

More Password input examples

See them all, with keyboard support and accessibility notes, on the Password input page.