Search Field

[Porlin]

Hi There,

Does Paste have a search field with a clear button (maybe a cross icon)? Should we consider using that instead here in this example? If this might be a breaking change we would rule it out.

Flex Teams View example

I've seen some different usages in Console and on the Paste website eg. search field with a secondary 'Clear filters' button in the console. And on the Paste website in the search feature you use a cross icon. Can you advise which one we can/should use?

[kelseycavitt]

Hi @Porlin 👋 !

Does Paste have a search field with a clear button (maybe a cross icon)? Should we consider using that instead here in this example? If this might be a breaking change we would rule it out.

For advising what to use, it would be helpful for us to see what you’re wanting to implement at the entire page level, could you share a wider view screenshot or a Figma link?

If you’re implementing a combobox here, we are actually in the midst of finishing the design of Combobox that does include the ability to display a “clear” button. In our current release, we’re planning to finish the final design of this. In the next release, we plan to release the component in Paste.

If you’re referring to filter group pattern, there is not a “clear” button within the search input like you have in your screenshot.

For the input component itself, you could implement a clear button in the suffix, as seen below, in Figma (You can manually unhide the layer). We currently don’t support props to have both a prefix and a suffix in Figma out of the box, as it would double the number of variants we’d need to support.

[kelseycavitt]

[Porlin]

Hi @kelseycavitt

Please see the attached screenshots we have implemented at entire page level.

Thanks for the suggestion to implement a clear button in the suffix, we will try it.