Checks & Radios

Create consistent, cross-browser checkboxes, radios, and toggle switches with .velin-check.

Checkboxes

Wrap each checkbox input and label inside a .velin-check container.

Checked checkbox

Default checkbox

Disabled checkbox

<div class="velin-check">
  <input class="velin-check__input" type="checkbox" id="ck1" checked>
  <label class="velin-check__label" for="ck1">Checked checkbox</label>
</div>
<div class="velin-check">
  <input class="velin-check__input" type="checkbox" id="ck2">
  <label class="velin-check__label" for="ck2">Default checkbox</label>
</div>
<div class="velin-check">
  <input class="velin-check__input" type="checkbox" id="ck3" disabled>
  <label class="velin-check__label" for="ck3">Disabled checkbox</label>
</div>

Radios

Option one

Option two

Disabled option

<div class="velin-check">
  <input class="velin-check__input" type="radio" name="group" id="r1" checked>
  <label class="velin-check__label" for="r1">Option one</label>
</div>
<div class="velin-check">
  <input class="velin-check__input" type="radio" name="group" id="r2">
  <label class="velin-check__label" for="r2">Option two</label>
</div>

Switches

Add .velin-check--switch for a toggle switch appearance.

Active switch

Default switch

Disabled switch

<div class="velin-check velin-check--switch">
  <input class="velin-check__input" type="checkbox" id="sw1" checked>
  <label class="velin-check__label" for="sw1">Active switch</label>
</div>
<div class="velin-check velin-check--switch">
  <input class="velin-check__input" type="checkbox" id="sw2">
  <label class="velin-check__label" for="sw2">Default switch</label>
</div>

Inline layout

Add .velin-check--inline to render checks or radios horizontally.

Alpha

Bravo

Charlie

<div class="velin-check velin-check--inline">
  <input class="velin-check__input" type="checkbox" id="in1" checked>
  <label class="velin-check__label" for="in1">Alpha</label>
</div>
<div class="velin-check velin-check--inline">
  <input class="velin-check__input" type="checkbox" id="in2">
  <label class="velin-check__label" for="in2">Bravo</label>
</div>