Component SearchInput

SearchInput

A single-line text input with a leading search icon and a trailing × clear button when non-empty. Escape clears.

use yororen_ui::headless::search_input::search_input;

search_input("search-box")
    .placeholder("Search…")
    .value(self.query.clone())
    .on_change({
        let entity = cx.entity();
        move |new: &str, _, cx| entity.update(cx, |s, _| s.query = new.to_string());
    })
    .on_submit({
        let entity = cx.entity();
        move |value: &str, _, cx| entity.update(cx, |s, _| s.run_search(value));
    })
    .on_clear(|_, cx| cx.notify())
    .render(cx, window)

Props

Method	Purpose
placeholder(text)	Hint shown when empty. Default "Search…".
value(s)	Initial value (a String-like owned type).
disabled(v)	Disable interaction.
on_change(closure)	Fn(&str, &mut Window, &mut App) + 'static + Send + Sync.
on_submit(closure)	Fn(&str, &mut Window, &mut App) + 'static + Send + Sync. Fires on Enter.
on_clear(closure)	Fn(&mut Window, &mut App) + 'static + Send + Sync. Fires when the value is cleared (Escape or ×). The renderer has already cleared by the time it fires — there is no value argument.

Factory takes (id) only. .render(cx, window) returns AnyElement. The boot step from TextInput covers this component too.

See also: TextInput, PasswordInput, KeybindingInput.