Forms

PasswordInput

A password input with a show/hide visibility toggle. A drop-in replacement for Input on password fields — all native input props (name, required, autoComplete, etc.) are forwarded to the underlying input.

Sourcesrc/components/ui/password-input.tsx

Import

import { PasswordInput } from "@mikenotthepope/substrateui"

Disabled

With Field

Password

Must be at least 8 characters.

Labels

The reveal toggle is an icon whose name has to change with its state, so both halves are here. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's passwordInput key — the provider is how you translate the set once instead of at each call site.

Prop	Type	Default	Description
`showPassword`	`string`	`"Show password"`	Accessible name while the password is hidden.
`hidePassword`	`string`	`"Hide password"`	Accessible name while it is visible.

API Reference

Prop	Type	Default	Description
`containerClassName`	`string`	—	Additional CSS classes applied to the bordered wrapper element (not the inner input).
`labels`	`{ showPassword?: string; hidePassword?: string }`	—	Translatable strings for the visibility toggle. Resolves through the LabelsProvider (passwordInput) before falling back to English defaults.
`disabled`	`boolean`	`false`	When true, prevents interaction, reduces opacity, and applies a sunken background.
`className`	`string`	—	Additional CSS classes applied to the inner input element.