Segmented

Two to four choices you can see at once.

  • kit.seg()
  • 423 B of CSS · 10 rules
  • kit.css
  • No script needed
View

Use it

On your server

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

const html = kit.seg({
      name: 'view',
      label: 'View',
      options: [['grid', 'Grid'], ['list', 'List'], ['map', 'Map']],
      value: 'grid'
  });

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.seg({
        name: 'view',
        label: 'View',
        options: [['grid', 'Grid'], ['list', 'List'], ['map', 'Map']],
        value: 'grid'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 402 B
<div class="ovk-set-row"><span class="ovk-set-text" id="ovk-seg-view">View</span><span class="ovk-seg" role="radiogroup" aria-labelledby="ovk-seg-view"><label><input type="radio" name="view" value="grid" checked><span>Grid</span></label><label><input type="radio" name="view" value="list"><span>List</span></label><label><input type="radio" name="view" value="map"><span>Map</span></label></span></div>

What it weighs

Its own rules are 1.3 KB, 423 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.