Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Selection controls
Controls

Selection controls

Selection controls patterns built with StyloftCSS and native HTML.

CSS only4 examplesKeyboard friendly HTML

Checkbox

Native checked and disabled checkbox states.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<label class="sl-choice"><input type="checkbox" checked /> Receive sample updates</label
><label class="sl-choice"><input type="checkbox" disabled /> Unavailable option</label>
HTML source · enable JavaScript for the playground2 lines · UTF-8

CheckboxGroup

Independent checkboxes grouped with a legend.

Live preview
Choose modules
View HTML / PlaygroundHTML source
example.htmlHTML
<fieldset class="sl-fieldset sl-stack">
  <legend>Choose modules</legend>
  <label class="sl-choice"
    ><input type="checkbox" name="ref-module" value="motion" checked /> Motion</label
  ><label class="sl-choice"
    ><input type="checkbox" name="ref-module" value="tables" /> Tables</label
  ><label class="sl-choice"
    ><input type="checkbox" name="ref-module" value="tabs" /> Tabs</label
  >
</fieldset>
HTML source · enable JavaScript for the playground10 lines · UTF-8

RadioGroup

Native mutually exclusive selection and keyboard navigation.

Live preview
Choose a plan
View HTML / PlaygroundHTML source
example.htmlHTML
<fieldset class="sl-fieldset sl-stack">
  <legend>Choose a plan</legend>
  <label class="sl-choice"
    ><input type="radio" name="ref-plan" value="starter" checked /> Starter</label
  ><label class="sl-choice"
    ><input type="radio" name="ref-plan" value="studio" /> Studio</label
  >
</fieldset>
HTML source · enable JavaScript for the playground8 lines · UTF-8

Switch

A native checkbox exposed as a switch. The track and thumb transition smoothly.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-stack">
  <label class="sl-switch"
    ><input type="checkbox" role="switch" checked /><span
      class="sl-switch__track"
      aria-hidden="true"
    ></span
    ><span>Enable sample preference</span></label
  ><label class="sl-switch"
    ><input type="checkbox" role="switch" disabled /><span
      class="sl-switch__track"
      aria-hidden="true"
    ></span
    ><span>Unavailable preference</span></label
  >
</div>
HTML source · enable JavaScript for the playground15 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.