Component SearchInput

SearchInput

A standardized search input (magnifier + clear button + submit).

SearchInput is a convenience wrapper over TextInput that provides:

• A leading magnifier icon
• An inline clear button when there is content
• on_submit for “press Enter to search”

Example

use gpui::ElementId;
use yororen_ui::component::search_input;

let view = search_input()
    .key(("search", "query"))
    .placeholder("Search…")
    .on_change(|value, _window, _cx| {
        // ...
    })
    .on_submit(|value, _window, _cx| {
        // ...
    });

When to use

• Search bars
• Filtering inputs where the clear button improves UX

Recipes

• Guide-Recipes-VirtualList-Search

API

• search_input(): constructor
• id(...) / key(...): stable identity
• placeholder("...")
• disabled(bool)
• on_change(|value, window, cx| ...)
• on_submit(|value, window, cx| ...)
• Styling: bg/border/focus_border/text_color/height

Notes

• Internally it owns a TextInputState so the clear button can reset the content.

Defaults

• Height: 36px
• Leading icon: IconName::Search
• Clear button appears when there is content and the input is not disabled

Interaction details

• The clear button resets the internal TextInputState content to an empty string and calls on_change("", ...) if provided.