Input Password

A password input with a built-in visibility toggle. Clicking the eye icon switches between masked and plain-text views.

Properties

Name	Type	Default	Description
`label`	`string`	`''`	Visible label text rendered above the input.
`description`	`string`	`''`	Helper text shown below the input. Hidden when message is non-empty.
`message`	`string`	`''`	State-coloured validation message shown below the input.
`state`	`'none' \| 'error' \| 'success'`	`'none'`	Validation state. Controls border colour and message colour.
`name`	`string`	`''`	HTML name attribute for form submission.
`value`	`string`	`''`	Controlled value (mutable). Reflects to the inner input.
`placeholder`	`string`	`''`	Placeholder text.
`disabled`	`boolean`	`false`	Disables all interaction.
`required`	`boolean`	`false`	Marks field as required. Adds visual asterisk and aria-required="true".
`readonly`	`boolean`	`false`	Allows focus and selection but not editing.
`hideLabel`	`boolean`	`false`	Visually hides the label while keeping it as the accessible name.
`compact`	`boolean`	`false`	Enables dense mode. Reduces input height from 44 px (default touch target) to 32 px.
`autoComplete`	`string`	`undefined`	HTML autocomplete attribute. Use "current-password" for login and "new-password" for registration.
`theme`	`'dark' \| 'light'`	`'dark'`	Per-component theme override. Reflects onto host data-theme.
`showToggle`	`boolean`	`true`	Shows the eye icon button that toggles password visibility. Set to false for confirm-password fields.

Name	Detail type	Bubbles	Description
`change`	`string`	Yes	Emitted when the user commits a value (on blur or Enter).
`input`	`string`	Yes	Emitted on every keystroke / value change.
`blur`	`FocusEvent`	No	Emitted when the input loses focus.
`focus`	`FocusEvent`	No	Emitted when the input gains focus.