-
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. |
Beta Was this translation helpful? Give feedback.
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 the Floating 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: |
Beta Was this translation helpful? Give feedback.
-
You could also use Input Groups and prepend/append the icon. |
Beta Was this translation helpful? Give feedback.
-
Thanks for the suggestion @Hiws. I'll give these a shot. |
Beta Was this translation helpful? Give feedback.
You can't do this directly using the standard
placeholder
attribute as it does not support HTML.You will instead need to position the icon on top of the input with
position: absolute
.You can do this fairly easily using just utility classes. You could also implement the Floating 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