Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Option to Hide Clear Button in Search Input #2377

Open
Akshay090 opened this issue Oct 16, 2024 · 3 comments
Open

Feature Request: Option to Hide Clear Button in Search Input #2377

Akshay090 opened this issue Oct 16, 2024 · 3 comments

Comments

@Akshay090
Copy link
Contributor

Description:
Currently, the Search Input component does not provide an option to hide the clear (cross) button. You can view the current implementation in the Storybook.

Screenshot for Reference:
Clear Button in Search Input
Reason for Request:
In certain UI layouts, such as when the search input is placed inside a bottom sheet that already contains a close (cross) icon, the clear button in the search input appears redundant. This visual repetition can lead to a cluttered design, making it preferable to have an option to hide the clear button in such scenarios.

Example of the Issue:
Here’s an example of how the search input looks within a bottom sheet containing its own close button:
Screenshot 2024-10-16 at 11 30 27 AM

Proposed Solution:
Introduce a prop or option to conditionally hide the clear button in the Search Input component to avoid this visual redundancy.

@reachaadrika
Copy link

Hey @Akshay090 , Can I work on this ?
Kindly assign this to me
Thanks

@saurav12 saurav12 assigned saurav12 and unassigned saurav12 Oct 17, 2024
@rkdotdesign
Copy link

While both buttons are positioned near each other, they serve distinct functions. The button on the bottomSheet closes the sheet entirely, while the button on the searchInput clears the entered text. For users actively engaged in searching, providing a direct option to clear their input enhances the overall user experience.

Rather in cases like these can we try using the bottomSheet header to avoid scenarios like these where 2 dismiss buttons are in such close proximity?

@yadavshubham01
Copy link

hey @saurav12 i want to work on this issue can you please assign me ??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants