Checkboks En enkeltstående avmerkingsboks (input).

Struktur

<lk-checkbox>

  <label>
    <input>
      <span>
        <slot/>
      </span>
    </input>
  </label>

  (p/)

</lk-banner>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
guid string "" <input> sin id=
input-name string "" <input> sin name=
error-message string "" Tekst til <p>
label string "" Tekst til <input> sin <span>
value string "" <input> sin value=
required boolean false <input> sin required=
disabled boolean false <input> sin disabled=
checked boolean "" <input> sin checked=
small boolean "" Legger til "checkbox--small" i <input> sin class=
input-class string "checkbox--trigger" Legges til i <input> sin class=
label-class string "checkbox__label" Legges til i <span> sin class=
dependant-element
dependant-id
dependant-guid
dependant-class
string "" Ref. "betinget visning av felter"
show-dependant-if-checked
hide-dependant-if-checked
boolean "" Ref. "betinget visning av felter"
select-handler callback(event):function () => {} Blir kalt i <input> sin onChange=

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <span>. Tilsvarer label=

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
validate () valid:boolean
getSelected () checked:boolean

Eventer

Ref. Stenciljs.com

Event Parameter Beskrivelse
componentSelected (event) Blir kalt i <input> sin onChange=. Tilsvarer select-handler=

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Jeg bekrefter ditten og datten
<lk-checkbox>Jeg bekrefter ditten og datten</lk-checkbox>

Hvor finner jeg denne koden?