Segmented, full width

Three or four equal choices filling the row, each with an icon; the radios post without JavaScript.

  • kit.segmented()
  • 437 B of CSS · 10 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = kit.segmented({
      name: 'kind',
      ariaLabel: 'What to paste',
      value: 'text',
      items: [
          { value: 'text', label: 'Text', icon: 'page' },
          { value: 'code', label: 'Code', icon: 'code' },
          { value: 'link', label: 'Link', icon: 'link' },
      ]
  });

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.segmented({
        name: 'kind',
        ariaLabel: 'What to paste',
        value: 'text',
        items: [
            { value: 'text', label: 'Text', icon: 'page' },
            { value: 'code', label: 'Code', icon: 'code' },
            { value: 'link', label: 'Link', icon: 'link' },
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 784 B
<span class="ovk-seg ovk-seg--fill" role="radiogroup" aria-label="What to paste"><label class="ovk-seg-item"><input type="radio" name="kind" value="text" checked><span>Text</span></label><label class="ovk-seg-item"><input type="radio" name="kind" value="code"><span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.8 7.8l-4.2 4.2l4.2 4.2M16.2 7.8l4.2 4.2l-4.2 4.2M14.2 4.6l-4.2 14.8"/></svg>Code</span></label><label class="ovk-seg-item"><input type="radio" name="kind" value="link"><span><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.9 14.1a4.3 4.3 0 0 0 6.1 0l3.2-3.2a4.3 4.3 0 0 0-6.1-6.1l-1.1 1.1M14.1 9.9a4.3 4.3 0 0 0-6.1 0l-3.2 3.2a4.3 4.3 0 0 0 6.1 6.1l1.1-1.1"/></svg>Link</span></label></span>

What it weighs

Its own rules are 1.2 KB, 437 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.