PasswordInput

A secure text input with built-in visibility toggle for password fields.

Import

tsx

import { PasswordInput } from "asheeui";

Usage

tsx

import { PasswordInput } from "asheeui";

export default function Basic() {
	return (
		<div className="w-full max-w-md">
			<PasswordInput label="Password" placeholder="Enter your password" />
		</div>
	);
}

Examples

Custom toggle labels

Password

Custom toggle icons

Password

Inheritance

PasswordInput extends the <Input /> component and inherits all of its props and functionality. This means you can use any Input prop with PasswordInput, including:

size, radius, variant, color
label, labelAlign, description, message
status, required, isLoading, disabled
startContent, className, and all native input attributes

Reference: For a complete list of inherited props with detailed descriptions, see the Input documentation.

What PasswordInput adds

PasswordInput extends Input with the following additional features:

Feature	Description
Visibility Toggle	A built-in eye icon button that toggles between showing and hiding the password text
Toggle Aria Label	Dynamic aria-label for the toggle button that updates based on visibility state
Custom Icons	Ability to override the default eye icons with custom icons
AutoComplete	Defaults to `"current-password"` for better password manager integration

What PasswordInput modifies

Modification	Description
`type`	Controlled internally - toggles between `"password"` and `"text"`
`endContent`	Used internally for the toggle button - not available as a prop
`autoComplete`	Defaults to `"current-password"` instead of `"off"`

Props

Prop	Type	Default	Description
`toggleAriaLabel`	`(show: boolean) => string`	`(show) => show ? "Hide password" : "Show password"`	Function returning aria-label for toggle button
`offIcon`	`ReactNode`	`EyeOffIcon`	Icon shown when password is visible (hide button)
`onIcon`	`ReactNode`	`EyeIcon`	Icon shown when password is hidden (show button)
`autoComplete`	`string`	`"current-password"`	Autocomplete attribute for password managers

Excluded Props

The following Input props are not available on PasswordInput because they are controlled internally:

Prop	Reason
`type`	Controlled internally to toggle between `"password"` and `"text"`
`endContent`	Used internally for the toggle button

All other Input props are fully supported. See the Input documentation for the complete list.

Global Configuration

PasswordInput inherits all global configuration from Input since it wraps the Input component. See the Input docs for configuration options.

Accessibility

Renders a native <input> with type="password" or type="text" depending on visibility state
Toggle button includes a dynamic aria-label that updates based on visibility state
Toggle button has tabIndex={-1} to prevent focus interference with password managers
Uses aria-describedby for associated description and message text
Supports disabled state with proper styling
Implements focus-visible rings for keyboard navigation
Toggle button is accessible via keyboard (focusable with tabIndex={-1} for programmatic focus only)

Notes

Toggle Behavior: Clicking the eye icon toggles password visibility between password and text input types.
Password Managers: The toggle button uses tabIndex={-1} to prevent issues with password manager autofill.
Custom Aria Labels: Use toggleAriaLabel to provide custom aria labels for the toggle button based on visibility state.
Custom Icons: The onIcon (show button) and offIcon (hide button) props allow you to replace the default eye icons with custom React nodes.
All Input Props: This component accepts all props from the Input component (except type and endContent), making it highly customizable.
AutoComplete: Defaults to "current-password" for better compatibility with password managers. Can be overridden if needed.