Skip to main content
MybringDesign System

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>