Search input example
Single input and button combo
-
Search inputs can use
type="search"to automatically get the clear all functionality when clicking escape, some browsers also show a cross icon. This is most useful in instant filtering. - Always include a label.
- "Search" is fine, but including what the search is for can help clarify the interface, if needed. For instance "Search for user".
- This is mostly used for search, but can be used for anything that combines a single input and a button.
References
<form class="mb-form">
<label for="search-input">Input type label</label>
<div class="flex flex-wrap gaxs">
<input type="search" id="search-input" class="maxw20r" />
<button type="button" class="btn btn--green">Search for data</button>
</div>
</form>