Component PasswordInput

PasswordInput

A single-line text input that masks its value. The real text lives in the internal state; the renderer paints a mask_char for each character.

Import

use yororen_ui::headless::password_input::password_input;

Minimal example

use yororen_ui::headless::password_input::password_input;

password_input("password")
    .placeholder("Password")
    .mask_char('•')
    .max_length(128)
    .on_change({
        let entity = cx.entity();
        move |new: &str, _window, cx| {
            entity.update(cx, |s, _cx| s.password = new.to_string());
        }
    })
    .on_submit({
        let entity = cx.entity();
        move |_value: &str, _window, cx| {
            entity.update(cx, |s, _cx| s.attempting_sign_in = true);
        }
    })
    .render(cx, window)

Props

Method	Purpose
placeholder(text)	Hint shown when empty.
max_length(n)	Hard cap on the value's UTF-8 byte length.
mask_char(c)	Character used to mask each input character. Default '•'.
disabled(v)	Disable interaction.
on_change(closure)	Fn(&str, &mut Window, &mut App) + 'static + Send + Sync. Fires on every accepted change.
on_submit(closure)	Fn(&str, &mut Window, &mut App) + 'static + Send + Sync. Fires on Enter.
has_custom_bg(v) / custom_bg(hsla)	Override the background.
has_custom_border(v) / custom_border(hsla)	Override the border.
has_custom_focus_border(v) / custom_focus_border(hsla)	Override the focus border.
custom_text_color(hsla)	Override the text color.

Notes

• Factory takes (id) only — no cx argument. The id must be stable across re-renders.
• .render(cx, window) is two-arg and returns AnyElement. The window is required for IME / paste.
• on_change and on_submit receive &str — the actual value, not the masked text. Never log the value, and never to_string() it into a label.
• The state is minted internally by the renderer via window.use_keyed_state(...) — there is no Entity<PasswordState> for the caller to manage.
• The real value is in state.value: String (UTF-8) — accessed only by the renderer's keymap and your on_change callback.

See also

TextInput, SearchInput, NumberInput, Form