Checkboxen & Radios 1.2.0

Erstelle konsistente, browserübergreifende Checkboxen, Radios und Toggle-Switches mit .velin-check. English: Checks & Radios

Reifegrad: Als stabil in VelinStyle 1.2.0 dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist separat und dort beta / foundation, wo es so gekennzeichnet ist.

Wann verwenden

Boolesche Auswahl mit .velin-check; sich gegenseitig ausschließende Optionen mit .velin-radio und gemeinsamem name.
Halte Trefferflächen groß - Check-/Radio-Zeilen nutzen eine 44px-orientierte Mindest-Blockgröße.

Wann nicht

Nutze Farbe nicht allein für den ausgewählten Zustand - verlasse dich auf den nativen checked-Zustand und Labels.
Mische Radios nicht ohne Gruppennamen; Validierung benötigt für Pflichtgruppen weiterhin form-summary.

Checkboxen

Wickle jede Checkbox-Eingabe und ihr Label in einen .velin-check-Container.

Aktivierte Checkbox

Standard-Checkbox

Deaktiviert 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 eins

Option zwei

Deaktiviert 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

Füge .velin-check--switch hinzu, um eine Toggle-Switch-Darstellung zu erhalten.

Aktiver Switch

Standard-Switch

Deaktiviert 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

Füge .velin-check--inline hinzu, um Checks oder Radios horizontal darzustellen.

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>