Component
PasswordInput
A password field with a button that reveals what was typed.
import { PasswordInput } from '@loidolt/theme-svelte';
Example
At least 12 characters.
Notes
- The reveal button keeps one name and reports its state with
aria-pressed. Changing the name as well would announce the state twice. - Defaults to
autocomplete="current-password"; setnew-passwordon sign-up and reset forms so password managers offer to generate one.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
boxed | boolean | false | Draws the full box instead of the default underline. |
class | string | — | Lands on the wrapper; the rest props land on the input. |
inputClass | string | — | |
onVisibleChange | (visible: boolean) => void | — | |
ref bindable | HTMLInputElement | null | null | |
toggle | Snippet<[boolean]> | — | Custom button content; receives whether the password is visible. |
toggleLabel | string | 'Show password' | Accessible name of the reveal button. It stays the same in both states and aria-pressed reports which one is active — changing the name as well would announce the state twice. |
value bindable | string | '' | |
visible bindable | boolean | false | Whether the password is shown as plain text. |
Plus the attributes of Omit<HTMLInputAttributes, 'value' | 'type'>, forwarded to the root element.