Search box
v1.0.0An input that allows users to enter a keyword to filter content on the website.
Released
- History
- View changes
- Install
- npm i @gold.au/searchbox
- Tags
- Requires
- Contributors
Placement
On a landing or home page, it is recommended that the search box be placed in the top right area of the screen. This is where users expect to find the search.
On a search results page, the natural position of the searchbox is closer to the search results. This helps indicate a relationship between the results and the search query.
Additional Attributes
Given the open-ended nature of input expected in a search query, several additional input
attributes should be considered to ensure browsers' behaviours are tailored for search queries.
Enabling the autocomplete
attribute may risk the unintended exposure of sensitive queries for subsequent uses of the search form, especially where a browser may be in a shared environment.
The autocorrect
and spellcheck
attributes may not deliver consistent behaviours across users' devices, and even conflict with a server-side autocorrect or spellcheck function provided by the search engine.
The autocapitalize
attribute targets touch-screen devices, and does not have wide browser support. Users may not reasonably expect their search queries to be autocapitalised as they type, but most search engines treat queries case-insensitively.
Setting the required
attribute may also provide search users with a reminder that "empty" search terms are not able to be submitted, but this is not to be relied on as the sole means of providing that information.