Password input (UI SDK): Shown at first

defaultVisible starts with the text showing, for a secret people need to read, like a Wi-Fi password.

Wi-Fi password

Guests read it from here, so it starts shown.

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

function UiSdkPasswordInputVisible() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Label htmlFor="wifi-password">Wi-Fi password</Label>
      <PasswordInput
        defaultVisible
        defaultValue="maple-orbit-42"
        autoComplete="off"
      >
        <PasswordInputGroup>
          <PasswordInputControl id="wifi-password" />
          <PasswordInputToggle />
        </PasswordInputGroup>
      </PasswordInput>
      <p className="m-0 text-xs text-muted-foreground">
        Guests read it from here, so it starts shown.
      </p>
    </div>
  )
}

export { UiSdkPasswordInputVisible }

Add this example

This adds the example as components/examples/ui-sdk-password-input/visible.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-visible.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`	`–`
`defaultVisible`	`boolean`	`false`
`autoComplete`	`"current-password" \| "new-password" \| "off" \| string`	`"current-password"`

PasswordInputControl

Prop	Type	Default
`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.