Skip to content

Input Groups

Join inputs and buttons with fieldset[role="group"]. No custom class needed.

Search bar

<fieldset role="group">
  <input type="search" placeholder="Search…" aria-label="Search">
  <button type="submit">
    <span class="fabcons-search" aria-hidden="true"></span> Search
  </button>
</fieldset>

URL input with copy

<fieldset role="group">
  <input type="url" value="https://fapcss.dev/" readonly>
  <button data-outline>
    <span class="fabcons-copy" aria-hidden="true"></span> Copy
  </button>
</fieldset>

Email subscribe

<fieldset role="group">
  <input type="email" placeholder="[email protected]">
  <button data-secondary>Subscribe</button>
</fieldset>