Sections

Components

Utilities

Forms

Hooks

useIsMobile

Password Input

Copy Markdown

A field for entering secure text.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/password-input

Anatomy#

PasswordInput
└── PasswordInputGroup
    ├── PasswordInputInput
    └── PasswordInputTrigger

Usage#

import {
  PasswordInput,
  PasswordInputGroup,
  PasswordInputInput,
  PasswordInputTrigger,
} from "@/components/ui/password-input";

<PasswordInput>
  <PasswordInputGroup>
    <PasswordInputInput placeholder="Enter password" />
    <PasswordInputTrigger />
  </PasswordInputGroup>
</PasswordInput>

Controlled#

Use value and onChange on PasswordInputInput to control the password value.

PreviewCode

Character count: 0

States#

Disabled#

Use the disabled prop to disable the password input.

PreviewCode

Password

The field is currently disabled.

Invalid#

Use the invalid prop to mark the password input as invalid.

PreviewCode

Password

Please enter a valid password.

Sizes#

Use the size prop to change the input height.

Small#

PreviewCode

Medium#

PreviewCode

Large#

PreviewCode

Examples#

Autocomplete#

Use the autoComplete prop to hint autofill behavior to the browser.

current-password — signing in with an existing password
new-password — creating or resetting a password

PreviewCode

Current password

For signing in to an existing account.

New password

For creating or resetting a password.

Controlled Visibility#

Use visible and onVisibilityChange to control whether the value is shown.

PreviewCode

Auto Hide#

Use visible, onVisibilityChange, and a timer to hide the password again after it is revealed.

PreviewCode

Custom Indicator#

PreviewCode

With Field#

Combine with Field components, for labeled password fields with helper text.

PreviewCode

Password

Must be at least 8 characters.

API Reference#

PasswordInput#

Root component. Manages visibility and input state.

Prop	Type	Default
`size`	`"sm"	"md"
`autoComplete`	`"current-password"	"new-password"`
`defaultVisible`	`boolean`	`false`
`visible`	`boolean`	-
`disabled`	`boolean`	-
`invalid`	`boolean`	-
`readOnly`	`boolean`	-
`required`	`boolean`	-
`name`	`string`	-
`ignorePasswordManagers`	`boolean`	-
`onVisibilityChange`	`(details: VisibilityChangeDetails) => void`	-
`className`	`string`	-
`asChild`	`boolean`	`false`

PasswordInputGroup#

Wraps the input and visibility trigger.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

PasswordInputInput#

Password field.

Prop	Type	Default
`size`	`"sm"	"md"
`className`	`string`	-
`asChild`	`boolean`	`false`

PasswordInputTrigger#

Button that toggles visibility.

Prop	Type	Default
`className`	`string`	-

PasswordInputIndicator#

Renders different icons based on visibility. Use fallback for the hidden state and pass the visible-state icon as children.

Prop	Type	Default
`fallback`	`React.ReactNode`	`<EyeOffIcon />`
`children`	`React.ReactNode`	`<EyeIcon />`
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

[

Pagination ](/docs/components/pagination)[

Popover ](/docs/components/popover)

On This Page

Installation Anatomy Usage Controlled States Disabled Invalid Sizes Small Medium Large Examples Autocomplete Controlled Visibility Auto Hide Custom Indicator With Field API Reference PasswordInput PasswordInputGroup PasswordInputInput PasswordInputTrigger PasswordInputIndicator