Form controls

PasswordInput

A secret field with a reveal toggle. Everything else matches Input: the same border, the same focus ring, the same hint and error treatment. The toggle is a real type="button", so clicking it inside a login form reveals the value instead of submitting the form.

Basic

Password

At least 12 characters.

The field above is prefilled. Click the eye to reveal it, and click it again to hide it. Clearing the field hides it too, so a value the user deletes cannot stay legible on screen.

Never revealable

Pass revealable={false} for a value that must not be shown, for instance on a screen someone is sharing. A disabled field drops the toggle for the same reason.

Signing key

Shown once, at creation. Store it somewhere safe.

Error state

Confirm password

Both passwords must match.

API

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable field value.
`label`	`string`	no default	Label rendered above the control.
`labelHidden`	`boolean`	`false`	Keep the label for screen readers only, for a secret in a table cell.
`hint`	`string`	no default	Helper text below the control. An error replaces it.
`error`	`string`	no default	Error message. Reddens the border.
`placeholder`	`string`	`''`	Native placeholder.
`revealable`	`boolean`	`true`	Show the reveal toggle. False for a value that must never be displayed.
`autocomplete`	`'new-password' \| 'current-password' \| 'off'`	`'new-password'`	What a password manager should offer.
`disabled`	`boolean`	`false`	Disable the field. Also drops the toggle.
`readonly`	`boolean`	`false`	Render the value without accepting edits.
`required`	`boolean`	`false`	Mark as required for form validation. Renders a red asterisk.
`id`	`string`	no default	DOM id of the input. Generated when omitted.
`name`	`string`	no default	Native form name.
`class`	`string`	no default	Extra classes on the field wrapper.
`controlClass`	`string`	no default	Extra classes on the input itself.
`oninput`	`(e: Event) => void`	no default	Fires on every keystroke, after the bound value updates.
`onchange`	`(e: Event) => void`	no default	Native change event.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.