HextaUI
156Get started
HextaUI

Password input (UI SDK): Disabled

A disabled field and its toggle are skipped by Tab, and the value doesn’t submit.

Your administrator manages this password.

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

function UiSdkPasswordInputDisabled() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="managed-password">Password</Label>
      <PasswordInput disabled defaultValue="hunter22">
        <PasswordInputGroup>
          <PasswordInputControl id="managed-password" />
          <PasswordInputToggle />
        </PasswordInputGroup>
      </PasswordInput>
      <p className="m-0 text-xs text-muted-foreground">
        Your administrator manages this password.
      </p>
    </div>
  )
}

export { UiSdkPasswordInputDisabled }

Add this example

This adds the example as components/examples/ui-sdk-password-input/disabled.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-disabled.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

PropTypeDefault
defaultValue
string–
disabled
booleanfalse

PasswordInputControl

PropTypeDefault
id
string–

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.

Related components