Search input example
Single input and button combo
- This is mostly used for search, but can be used for anything that combines a single input and a button.
- The input width is a nice default, but should be adjusted if the potential input or label is longer, or the overall interface calls for it.
- 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".
References
<label class="form__label" for="search-input">Input type label</label>
<div class="flex flex-wrap gcxs">
<input type="text" id="search-input" class="form__control maxw20r" />
<button type="button" class="btn btn--green">Search for data</button>
</div>