Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Password Input for React Radix UI

A field for entering secure text.

Framework
UI library

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/password-input.json

Anatomy

PasswordInput
├── PasswordInputInput
├── PasswordInputLabel
├── PasswordInputGroup
├── PasswordInputIndicator
└── PasswordInputTrigger

Usage

import {
  PasswordInput,
  PasswordInputGroup,
  PasswordInputInput,
  PasswordInputTrigger,
} from "@/components/ui/password-input";
<PasswordInput className="w-full max-w-64">
  <PasswordInputGroup>
    <PasswordInputInput placeholder="Enter password" />
    <PasswordInputTrigger />
  </PasswordInputGroup>
</PasswordInput>

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Auto Hide

Autocomplete

Controlled

Controlled Visibility

Custom Indicator

Disabled

Field

Invalid

Size Lg

Size Md

Size Sm

API Reference

PasswordInput

PropType
autoComplete?string
defaultValue?string
visible?boolean

PasswordInputGroup

PropType
AttributeType
data-disabled?string
data-invalid?string

PasswordInputInput

PropType
AttributeType

PasswordInputTrigger

PropType
AttributeType

PasswordInputIndicator

PropType
AttributeType

usePasswordInput