Select row

One choice of several, as a row.

  • kit.selectRow()
  • 429 B of CSS · 13 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = '<form class="ovk-form">'
    + kit.selectRow({
      name: 'quality',
      label: 'Video quality',
      hint: 'Auto follows your connection',
      options: [['auto', 'Auto'], ['1080', '1080p'], ['720', '720p']],
      value: 'auto'
  })
    + '</form>';

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 = '<form class="ovk-form">'
      + OpenVibeKit.selectRow({
        name: 'quality',
        label: 'Video quality',
        hint: 'Auto follows your connection',
        options: [['auto', 'Auto'], ['1080', '1080p'], ['720', '720p']],
        value: 'auto'
    })
      + '</form>';
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 298 B
<form class="ovk-form"><label class="ovk-set-row"><span class="ovk-set-text">Video quality<small>Auto follows your connection</small></span><select name="quality"><option value="auto" selected>Auto</option><option value="1080">1080p</option><option value="720">720p</option></select></label></form>

What it weighs

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