Inputs & Textarea
Pull to Refresh
React Grid Layout
Search allows users to enter a word or phrase to find relevant content.
There are two key variations of search — header search and independent search. Either variation can be collapsed or open by default.
The instant search menu is built using menu items. There are five core variations to use depending on the type of result being shown — section header, auto-completion, recent search, basic result, basic result with extra info and article result.
Search inputs come in different states depending on how the user is interacting with it — enabled, hover, focus, active, and filled.
Search is available in three sizes — large, medium and small.
Use large sized components on mobile touch devices for optimized tap area. Be sure the user can interact with both the keyboard and the instant seach menu.