Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.9k
-
Is your feature request related to a problem? Please describe...I would like to display a search icon within the placeholder text of my search input field. This creates a visual representation for users to quickly interpret what the field does. Describe alternatives you've consideredWe've added a disabled button with a search icon. Takes up space and has a negative impact of users sometimes trying to click the button. Additional contextIs there already a way to do this? Apologies if I'm missing something but struggling to find a way to add it. |
BetaWas this translation helpful?Give feedback.
All reactions
You can't do this directly using the standardplaceholder attribute as it does not support HTML.
You will instead need to position the icon on top of the input withposition: absolute.
You can do this fairly easily using just utility classes. You could also implement theFloating Label example, which uses the same logic of placing the label on top of the input and in turn allowing HTML.
Here's a codepen with examples of both:
https://codepen.io/Hiws/pen/OJXoyaO
Replies: 3 comments
-
You can't do this directly using the standard You can do this fairly easily using just utility classes. You could also implement theFloating Label example, which uses the same logic of placing the label on top of the input and in turn allowing HTML. Here's a codepen with examples of both: |
BetaWas this translation helpful?Give feedback.
All reactions
-
You could also useInput Groups and prepend/append the icon. |
BetaWas this translation helpful?Give feedback.
All reactions
👍 1
-
Thanks for the suggestion@Hiws. I'll give these a shot. |
BetaWas this translation helpful?Give feedback.
All reactions
This discussion was converted from issue #6020 on December 14, 2020 15:42.