Password input
A password field with a toggle that shows it as text.
At least twelve characters.
forSlots(PasswordInputSlots)(Recipes.PasswordInput({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const PasswordInputStyle = forSlots(PasswordInputSlots)(Recipes.PasswordInput({}))
export const passwordInput = <Message>(
style: NamedStyle<typeof PasswordInputSlots>,
field: {
readonly value: string
readonly visible: boolean
readonly onInput: (value: string) => Message
readonly onToggle: Message
},
h: HtmlBuilder<Message>,
): Html =>
PasswordInput.view(
{
id: 'preview-password',
label: 'Password',
description: 'At least twelve characters.',
autocomplete: 'new-password',
...field,
style,
},
h,
)