Vitreo
Forms

Search

Search fields for every place; each one here narrows the list under it

Default

⌘K
Code 
<div class="flex flex-col gap-3">
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="sr-1" name="sr-1" type="search" placeholder="Search pages" data-list-search="sr-pages">
    <kbd>⌘K</kbd>
  </div>
  <ul class="list list-divided list-flush" id="sr-pages">
    <li class="list-empty" hidden>No page by that name</li>
    <li data-tags="overview">
      <a class="list-row" href="index.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Overview</span></div>
        </div>
      </a>
    </li>
    <li data-tags="orders">
      <a class="list-row" href="ecommerce-orders.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Orders</span></div>
        </div>
      </a>
    </li>
    <li data-tags="customers">
      <a class="list-row" href="ecommerce-customers.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Customers</span></div>
        </div>
      </a>
    </li>
    <li data-tags="invoices">
      <a class="list-row" href="invoices.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Invoices</span></div>
        </div>
      </a>
    </li>
    <li data-tags="settings">
      <a class="list-row" href="settings.html">
        <div class="media">
          <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Settings</span></div>
        </div>
      </a>
    </li>
  </ul>
</div>

With a filter

Orders
Order Customer Status Total
#11330 Nora Svensson Delivered $204.12
#11329 Liam Walsh Delivered $160.92
#11328 Ava Thompson Processing $93.32
#11327 Nora Svensson Processing $82.52
#11326 Sean Gallagher Shipped $160.92
#11325 Julia Weber Processing $33.92
Code 
<div class="flex flex-col gap-3">
  <div class="flex items-center gap-2">
    <div class="field">
      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
      <input id="sr-2" name="sr-2" type="search" placeholder="Search orders" data-table-search="sr-orders">
    </div>
    <select id="sr-3" name="sr-3" class="select" aria-label="Status" data-table-filter="sr-orders">
      <option value>All statuses</option>
      <option value="Processing">Processing</option>
      <option value="Shipped">Shipped</option>
      <option value="Delivered">Delivered</option>
    </select>
  </div>
  <div class="table-wrap">
    <table class="table" id="sr-orders">
      <caption class="sr-only">Orders</caption>
      <thead>
        <tr>
          <th scope="col">Order</th>
          <th scope="col">Customer</th>
          <th scope="col">Status</th>
          <th class="end" scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><b>#11330</b></td>
          <td>Nora Svensson</td>
          <td><span class="badge badge-success"><span class="dot"></span>Delivered</span></td>
          <td class="end num">$204.12</td>
        </tr>
        <tr>
          <td><b>#11329</b></td>
          <td>Liam Walsh</td>
          <td><span class="badge badge-success"><span class="dot"></span>Delivered</span></td>
          <td class="end num">$160.92</td>
        </tr>
        <tr>
          <td><b>#11328</b></td>
          <td>Ava Thompson</td>
          <td><span class="badge badge-info"><span class="dot"></span>Processing</span></td>
          <td class="end num">$93.32</td>
        </tr>
        <tr>
          <td><b>#11327</b></td>
          <td>Nora Svensson</td>
          <td><span class="badge badge-info"><span class="dot"></span>Processing</span></td>
          <td class="end num">$82.52</td>
        </tr>
        <tr>
          <td><b>#11326</b></td>
          <td>Sean Gallagher</td>
          <td><span class="badge badge-info"><span class="dot"></span>Shipped</span></td>
          <td class="end num">$160.92</td>
        </tr>
        <tr>
          <td><b>#11325</b></td>
          <td>Julia Weber</td>
          <td><span class="badge badge-info"><span class="dot"></span>Processing</span></td>
          <td class="end num">$33.92</td>
        </tr>
        <tr class="table-empty" hidden data-table-empty>
          <td colspan="4"><b>No results</b><span class="muted"> · Try other words or clear the filter.</span></td>
        </tr>
      </tbody>
    </table>
    <p class="table-empty" data-table-empty hidden>No rows match your search.</p>
  </div>
</div>

Large

Code 
<div class="flex flex-col gap-3">
  <div class="field">
    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    <input id="sr-4" name="sr-4" type="search" placeholder="What are you looking for?" data-list-search="sr-help">
  </div>
  <ul class="list list-divided list-flush" id="sr-help">
    <li class="list-empty" hidden>No help article matches</li>
    <li data-tags="getting started">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Getting started</span><span class="media-sub">Your first workspace, inviting the team, the basics</span></div>
        </div>
      </a>
    </li>
    <li data-tags="billing and plans">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Billing and plans</span><span class="media-sub">Invoices, taxes, changing or cancelling a plan</span></div>
        </div>
      </a>
    </li>
    <li data-tags="security and sign-in">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body">
            <span class="media-title">Security and sign-in</span><span class="media-sub">Two-step sign-in, passkeys, single sign-on, sessions</span>
          </div>
        </div>
      </a>
    </li>
    <li data-tags="integrations">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Integrations</span><span class="media-sub">Connect the tools you already use</span></div>
        </div>
      </a>
    </li>
    <li data-tags="reports and dashboards">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">Reports and dashboards</span><span class="media-sub">Build, share and schedule reports</span></div>
        </div>
      </a>
    </li>
    <li data-tags="api and webhooks">
      <a class="list-row" href="kb-article.html">
        <div class="media">
          <span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
          <div class="media-body"><span class="media-title">API and webhooks</span><span class="media-sub">Keys, limits, events and examples</span></div>
        </div>
      </a>
    </li>
  </ul>
</div>
© Vitreo. All rights reserved.