Checkbox

Om komponenten

Designet i Punkt er av en slik art at det er mulig å bruke standard html skjemaelementer uten for mye fancy workarounds.

Både checkboxer og radiobuttons bruker samme klasse, pkt-form-check-input, som sikrer både layout og utseende.

Strukturelt skal <input> og <label være søskenelementer istedet for å ha <label> rundt <input>. Dette krever at litt mer markup siden du må legge til id og for attributter. Dette er gjort for at det er dette som gir mest konsistent resultat for hjelpemiddelsoftware.

Varianter

<div class="pkt-form-group">
  <input type="checkbox" class="pkt-form-check-input" id="exampleCheckbox1" />
  <label class="pkt-form-label" for="exampleCheckbox1">Checkbox 1</label>
</div>
<div class="pkt-form-group">
  <input type="checkbox" class="pkt-form-check-input" id="exampleCheckbox2" />
  <label class="pkt-form-label" for="exampleCheckbox2">Checkbox 2</label>
</div>

Disabled

Legg til disabled som attribute og både label og input får riktig styling for å vise state.

<div class="pkt-form-group">
  <input type="checkbox" class="pkt-form-check-input" id="exampleCheckbox1" disabled />
  <label class="pkt-form-label" for="exampleCheckbox1">Checkbox 1</label>
</div>
<div class="pkt-form-group">
  <input type="checkbox" class="pkt-form-check-input" id="exampleCheckbox2" disabled />
  <label class="pkt-form-label" for="exampleCheckbox2">Checkbox 2</label>
</div>