Welcome to Week 2, Day 3 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement of the design to implement. For day three, our goal is to…
Despite the fact that many (most?) search bar UI components allow a user to submit the search query by pressing
return, it is also best practice to include a click-able button.
If users are so inclined, they can click that to search. Otherwise, such users– and perhaps users that are less tech-literate– may be confused as to how to submit the search query. Besides, pixels are cheap and who doesn't like more options?
Following the original design I created, this is what I've got for Day 3:
The submit/search button uses much of the same styles of the search
input element, for uniformity and because it's a great size for clicking and tapping, making it easy for users to get their searching done.
Instead of using a
button element– which would still work to submit the
form element, I use an
input element with the type of
submit; this is more semantic and clearly defines the purpose of the element. To further cement semantic utility of this element, I updated the
value attribute to read "Search", since the native "submit" is not very clear in what exactly the user is "submitting" or to what form. Note that you do not need to add a name to this element, since rarely– if ever– do search queries need the value of the
submit input sent with a query, and input elements with no
name attribute are never submitted to the server.
Here is an animation of the search input and submit button working together:
I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)
Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.
Happy coding! 🎉
- (Sunday 4/15) Design component ✅
- Input field ✅
- Submit button 🎯
- Integrate autocomplete functionality
- Past search term indicators
- 100% a11y score
- Tweaks, refactors, fixes