Skip to content

Component TextInput

MeowLynxSea edited this page Jun 18, 2026 · 10 revisions

TextInput

A single-line text input. Owns caret / selection / IME state internally — the renderer mints a TextInputState keyed by id.

use yororen_ui::headless::text_input::text_input;

text_input("name")
    .placeholder("Your name")
    .max_length(64)
    .on_change({
        let entity = cx.entity();
        move |new: &str, _, cx| entity.update(cx, |s, _| s.name = new.to_string());
    })
    .on_submit({
        let entity = cx.entity();
        move |value: &str, _, cx| entity.update(cx, |s, _| s.last_submitted = value.to_string());
    })
    .render(cx, window)

Props

Method Purpose
placeholder(text) Hint shown when empty.
value(s) One-shot initial value (the renderer reads it once when minting the state).
max_length(n) Hard cap on the value's UTF-8 byte length.
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 background.
has_custom_border(v) / custom_border(hsla) Override border.
has_custom_focus_border(v) / custom_focus_border(hsla) Override focus border.
custom_text_color(hsla) Override text color.

Factory takes (id) only — no cx. .render(cx, window) is two-arg and returns AnyElement (the renderer registers the EntityInputHandler for IME / paste).

on_change and on_submit receive &str (the new UTF-8 text). Convert with .to_string() before storing.

Boot step: call yororen_ui::headless::text_input::init(cx) once at app startup. Idempotent (guarded by a OnceLock); without it the 14 keyboard actions bound to the UITextInput context will not fire.

See also: PasswordInput, SearchInput, TextArea.

Clone this wiki locally