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.

Password

Use a passphrase or generated credential.

Playground

Props in the URL.

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

Loading playground.

States

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

Password

Use a passphrase or generated credential.

Default

Hidden password with reveal action.

Password

Visible

Password revealed as plain text.

Password

Password must be at least 12 characters.

Error

Validation error surfaced through Field.

Props

Name	Type	Default	Description
`value`	`string`	-	Controlled password value.
`defaultValue`	`string`	-	Uncontrolled initial password value.
`visibleLabel`	`string`	`Show password`	Accessible label for reveal action.
`hiddenLabel`	`string`	`Hide password`	Accessible label for hide action.
`label`	`ReactNode`	-	Field label.
`help`	`ReactNode`	-	Muted helper text.
`error`	`ReactNode`	-	Error copy and invalid treatment.