Password / secret input

Masked-by-default input for credentials and API keys. Reveal toggle and copy button are shown only when there is a value to act on.

Included in the single kansho full pack. Components are not offered as separate installs.

Variants

Account password

API key

Last rotated 2 days ago.

Webhook secret

Expires in 36 hours.

Read-only

Usage

Guidance

Use mode="new" for set-a-password fields, mode="current" for sign-in.
Enable showCopy for generated secrets the operator needs to carry elsewhere.

Don't

Reveal a stored credential by default — start masked.
Show the copy control on a sign-in field.

When to use: Any secret, token, or password entry or display.
When not to: Plain text fields — use the standard input.

Accessibility

Keyboard & screen reader

Keyboard

Tab: Move focus to the reveal and copy controls.
EnterSpace: Toggle reveal or trigger copy.

Announces

The reveal control exposes aria-pressed and toggles its label between Reveal value and Hide value.
Copy confirmation is announced through a polite live region.

Props

Extends input

Prop	Type	Default	Description
status	FieldStatus	—	Validation tone (error / success) forwarded to the field styling.
mode	'current' \| 'new'	'current'	Sets the autocomplete hint for sign-in vs. set-password.
showCopy	boolean	false	Show a copy-to-clipboard control.
showReveal	boolean	true	Show the mask / reveal toggle.
leadingIcon	boolean	false	Render a leading lock glyph.
...InputHTMLAttributes	input props	—	All native input props except type.

Component documentation

Password Input

components/inputs/password-input.tsx

Purpose

Adds optional reveal and copy actions to a styled password field.

Appropriate use

Use for secret entry where users may need to verify or copy the current value.

Example

components/inputs/password-input.tsx has a representative live example in the "Variants" section on /components/password-input.

States

Supports current or new mode, revealed or concealed value, copied feedback, field status, optional actions, and native disabled state.

API and props

PasswordInput extends native input attributes with status, mode, showCopy, showReveal, leadingIcon, and ref.

Dependencies

React, Lucide icons, Field, the Clipboard API, and the Kansho cn utility.

Accessibility

Reveal and copy buttons have changing accessible names, reveal uses aria-pressed, and copy completion is announced politely.

Limitations

Copy depends on the browser Clipboard API; callers remain responsible for password policy, strength, and secure submission.

Source

Source: components/inputs/password-input.tsx.

Full pack

components/inputs/password-input.tsx is documented at /components/password-input and installs only through the single Kansho full pack; no individual component install is offered.