Skip to content

Component TextInput

MeowLynxSea edited this page Jun 13, 2026 · 10 revisions

TextInput

A single-line text input. Owns the caret / selection / IME state internally (the renderer mints a TextInputState keyed by id). Use password_input for masked input, search_input for the search variant, text_area for multi-line.

Import

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

Minimal example

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

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

Props

Method Purpose
placeholder(text) Hint shown when empty.
disabled(v) Disable interaction.
max_length(n) Hard cap on the value's UTF-8 byte length.
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 rendered 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 because the renderer registers the EntityInputHandler for IME / paste.
  • on_change and on_submit receive &str (the new UTF-8 text), not SharedString. Convert with .to_string() before storing.
  • The state is minted internally by the renderer via window.use_keyed_state(...) — there is no Entity<TextInputState> for the caller to manage.
  • Boot step (required): call yororen_ui::headless::text_input::init(cx) once at app startup. The function is idempotent (guarded by a OnceLock); without it the 14 keyboard actions bound to the UITextInput context will not fire and keystrokes (backspace, arrow keys, enter, etc.) will not work.

See also

PasswordInput, SearchInput, NumberInput, TextArea, Form

Clone this wiki locally