Customize the clear search button

[metalshanked]

Thanks for this amazing library! had some quick questions around the clear button

1. Is there a way to make the clear button (the small X button) more prominent with colors, larger etc?
2. Is there a way to clear the input box from an external button?

[m-wrzr]

Thanks for the questions & input.

1) I've added some more styling functionality with version 0.1.11. There is now an option to select between different icons as well as adjusting some other styling related attributes, which wasn't possible before.

Code:

style_overrides={
            "clear": {
                "width": 20,
                "height": 20,
               # default: circle-filled
               # other: cross 
               "icon": "circle-unfilled",
                "stroke-width": 2,
                "stroke": "red",
            },
}

2) Regarding clearing the searchbox externally, the easiest way to achieve this right now would be to either assign a new key to the component or otherwise overwrite the searchbox state as mentioned in this issue: https://github.com/m-wrzr/streamlit-searchbox/issues/36 - I'm also planning to add some external trigger functions for this usecase in the coming weeks. Hope that helps!

[metalshanked]

Thank much! It is working great. One small observation is that the IDE linter shows an different expect different type than "dict" mentioned in the doc. It works fine though, will report if issues.

[m-wrzr]

Thanks for pointing it out, I've updated the type annotations 👍