Find

A search, or "add by name": a pill with an icon, the field and a round button.

  • kit.find()
  • 518 B of CSS · 13 rules
  • kit.css
  • No script needed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.find({
      action: '/search',
      name: 'q',
      placeholder: 'Search streams, people and rooms',
      label: 'Search'
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.find({
        action: '/search',
        name: 'q',
        placeholder: 'Search streams, people and rooms',
        label: 'Search'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 596 B
<form class="ovk-find" method="get" action="/search" role="search"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="10.6" cy="10.6" r="7"/><path d="M20.4 20.4l-4.5-4.5"/></svg><label for="ovk-find-q" class="ovk-sr">Search</label><input id="ovk-find-q" name="q" type="search" value="" placeholder="Search streams, people and rooms" autocomplete="off"><button type="submit" class="ovk-go" aria-label="Search" title="Search"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.9 3.6l8.4 8.4l-8.4 8.4"/></svg></button></form>

What it weighs

Its own rules are 1.6 KB, 518 B as sent: 3% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.