Component

Password input

Text input composition with secure visibility toggling and field validation chrome.

Password input is the canonical pattern for slotting an inline icon action into a field without changing input semantics.
form
Password inputDefault
Use a passphrase or generated credential.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Dense credential fields with reveal actions.
Use a passphrase or generated credential.

Success

Accepted credential with success message.
Credential meets workspace policy.

Disabled

Locked credential while a session is active.
Credential rotation is locked during an active release.

Error

Validation error surfaced through Field.
Password must be at least 12 characters.

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valuestring-Controlled password value.
defaultValuestring-Uncontrolled initial password value.
visibleLabelstringShow passwordAccessible label for reveal action.
hiddenLabelstringHide passwordAccessible label for hide action.
labelReactNode-Field label.
helpReactNode-Muted helper text.
errorReactNode-Error copy and invalid treatment.