Sections

Utilities

Forms

Hooks

useIsMobileNew

Password Input

A field for entering secure text.

Installation


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.

States

Disabled

Use the disabled prop to disable the password input.

Invalid

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

Sizes

Use the size prop to change the input height.

Small

Medium

Large

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

Controlled Visibility

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

Auto Hide

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

Custom Indicator

With Field

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

API Reference

PasswordInput

Root component. Manages visibility and input state.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`autoComplete`	`"current-password" \| "new-password"`	`"current-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" \| "lg"`	`"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

Popover