Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.
import * as PasswordInputPrimitive from "@/components/ui/password-input-primitive";
export function PasswordInputPrimitiveDemo() {Unstyled: This is an unstyled primitive. For a ready-to-use, shadcn-styled version, see the Password Input component.
Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/password-input-primitive
Anatomy#
import * as PasswordInputPrimitive from "@/components/ui/password-input-primitive";
export default () => (
<PasswordInputPrimitive.Root>
<PasswordInputPrimitive.Input />
<PasswordInputPrimitive.Toggle />
<PasswordInputPrimitive.Indicator />
</PasswordInputPrimitive.Root>
);Examples#
Default#
import * as PasswordInputPrimitive from "@/components/ui/password-input-primitive";
export function PasswordInputPrimitiveDemo() {Checkbox#
"use client";
import * as React from "react";API Reference#
Root#
Manages the visibility state and provides it to the parts below. Renders no element of its own.
| Prop | Type | Default | Description |
|---|---|---|---|
visible | boolean | - | Whether the password is visible. Use for controlled visibility. |
defaultVisible | boolean | false | The initial visibility when uncontrolled. |
onVisibleChange | (visible: boolean) => void | - | Called when the visibility changes. |
children | ReactNode | - | The password input parts. |
Input#
The password input. Switches its type between password and text based on the visibility. Renders an <input> by default.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | function | - | Render as a different element. |
...props | React.ComponentProps<"input"> | - | Props spread to the input element. |
Toggle#
Toggles the visibility. Renders a <button type="button"> by default; the render function receives the { visible } state.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | function | - | Render as a different element. Receives the { visible } state. |
...props | React.ComponentProps<"button"> | - | Props spread to the toggle element. |
Indicator#
A presentational slot for visibility-dependent content such as an eye icon. Hidden from assistive technology with aria-hidden. Renders a <span> by default; the render function receives the { visible } state.
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement | function | - | Render as a different element. Receives the { visible } state. |
...props | React.ComponentProps<"span"> | - | Props spread to the indicator element. |