Password Input
A password field with a visibility toggle and an optional strength meter. feedback opens a panel below the focused input rating the value weak, medium, or strong; the labels, the rating logic, and the panel's header and footer are all replaceable.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { PasswordInput } from "@carsxe/design-system/components/password-input"Usage
tsx
import { PasswordInput } from "@carsxe/design-system/components/password-input"
<PasswordInput placeholder="Password" feedback />Strength feedback
Custom labels and suggestions
Custom strength logic
States
API Reference
| Prop | Type | Default |
|---|---|---|
| feedback | boolean | false |
| getStrength | (value: string) => "weak" | "medium" | "strong" | undefined | getPasswordStrength |
| promptLabel | React.ReactNode | "Enter a password" |
| weakLabel | React.ReactNode | "Weak" |
| mediumLabel | React.ReactNode | "Medium" |
| strongLabel | React.ReactNode | "Strong" |
| feedbackHeader | React.ReactNode | — |
| feedbackFooter | React.ReactNode | — |
| toggleMask | boolean | true |
| showIcon | React.ReactNode | <EyeIcon /> |
| hideIcon | React.ReactNode | <EyeOffIcon /> |
| visible | boolean | — |
| defaultVisible | boolean | false |
| onVisibleChange | (visible: boolean) => void | — |