Tags for search options #1005
-
|
Hi Team! I'm working on the number provision search filter, and I'm trying to reduce the size of the 'advance search options' after hitting on 'search results. That's why I'm wondering if there exists tags or an equivalent component in Paste that I can use. Or if there's a better way so that the 'Advance search' will not take the whole screen. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
|
Hey @lgalloherran ! Can you give us more context about which part of this screen is the advanced search filters vs. which are just the regular filters? And what do you need the tags to do (example: whether they need to be interactive/focusable, what filters they're supposed to replace, etc)? The short answer is that we don't have tags or badges currently, but they are on our roadmap. We can potentially point you to a few product designers who have been doing similar work on filters and styling badges/tags using Box, Text, and tokens in the meantime. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Sarah, I'm hoping of using the tags in order to reduce the space that other search elements take. |
Beta Was this translation helpful? Give feedback.
-
|
@serifluous I have done a version with tags: (So once you hit search, the 'advanced search' section collapses and shows the tags: |
Beta Was this translation helpful? Give feedback.
-
|
Hey @lgalloherran ! For advanced search, using the Disclosure to collapse the additional form fields like you have here works. However, you won't be able to add any focusable element (like dismissible tags) in the Disclosure heading. Take a look at our accessibility guidelines around Disclosures. You can check out how Messaging Insights displays their filters when the Disclosure is collapsed and reach out to the Messaging designers to chat about whether using a similar pattern might be appropriate for your case. |
Beta Was this translation helpful? Give feedback.
Hey @lgalloherran !
For advanced search, using the Disclosure to collapse the additional form fields like you have here works. However, you won't be able to add any focusable element (like dismissible tags) in the Disclosure heading. Take a look at our accessibility guidelines around Disclosures.
You can check out how Messaging Insights displays their filters when the Disclosure is collapsed and reach out to the Messaging designers to chat about whether using a similar pattern might be appropriate for your case.