Tool input

The one field a tool needs, its button, and examples to try.

  • kit.toolInput()
  • 1.8 KB of CSS · 51 rules
  • kit.css
  • kit-data.css
  • No script needed

Tryopenvibe.liveexample.com

Use it

On your server

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

const html = kit.toolInput({
      name: 'domain',
      label: 'A domain',
      placeholder: 'openvibe.live',
      button: 'Look it up',
      icon: 'search',
      tries: { items: [{ value: 'openvibe.live' }, { value: 'example.com' }] }
  });

In a page that draws itself

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

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.toolInput({
        name: 'domain',
        label: 'A domain',
        placeholder: 'openvibe.live',
        button: 'Look it up',
        icon: 'search',
        tries: { items: [{ value: 'openvibe.live' }, { value: 'example.com' }] }
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.1 KB
<form class="ovk-tool-form" method="get" action="?"><label class="ovk-tool-label" for="ovk-tool-domain">A domain</label><div class="ovk-tool-row"><span class="ovk-tool-field"><input id="ovk-tool-domain" name="domain" type="text" value="" placeholder="openvibe.live" autocomplete="off" spellcheck="false" autocapitalize="off" required><button type="button" class="ovk-tool-clear" data-ovk-clear="#ovk-tool-domain" aria-label="Clear" title="Clear" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 3.7l16.7 16.7M20.4 3.7L3.7 20.4"/></svg></button></span><button type="submit" class="ovk-btn ovk-btn--primary ovk-tool-go"><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><span>Look it up</span></button></div><p class="ovk-try"><span>Try</span><a href="?domain=openvibe.live" data-ovk-try="openvibe.live" data-ovk-name="domain" data-ovk-for="#ovk-tool-domain">openvibe.live</a><a href="?domain=example.com" data-ovk-try="example.com" data-ovk-name="domain" data-ovk-for="#ovk-tool-domain">example.com</a></p></form>

What it weighs

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