Switch row

An on/off setting: the label and a hint on the left, the switch on the right.

  • kit.switchRow()
  • 586 B of CSS · 20 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = '<form class="ovk-form">'
    + kit.switchRow({
      name: 'live_alerts',
      label: 'Tell me when people I follow go live',
      hint: 'In the bell and as a push',
      on: true
  })
    + '</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.switchRow({
        name: 'live_alerts',
        label: 'Tell me when people I follow go live',
        hint: 'In the bell and as a push',
        on: true
    })
      + '</form>';
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 283 B
<form class="ovk-form"><label class="ovk-set-row ovk-set-switch"><span class="ovk-set-text">Tell me when people I follow go live<small>In the bell and as a push</small></span><input type="checkbox" role="switch" class="ovk-switch" name="live_alerts" value="1" checked></label></form>

What it weighs

Its own rules are 2.2 KB, 586 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.