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
DOM renderImage render
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.
Render state

Success

Accepted credential with success message.
Credential meets workspace policy.
Render state

Disabled

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

Error

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

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.