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
adjustDependants () Viser/skjuler det som komponenten skal styre

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 og lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<lk-checkbox required>Jeg bekrefter ditten og datten og lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</lk-checkbox>
default checkbox Not a valid checkbox checkedbox
<lk-checkbox>
    default checkbox
</lk-checkbox>

<lk-checkbox 
    id="check-box-2" 
    error-message="This field is required"
    required
>
    Not a valid checkbox
</lk-checkbox>

<lk-checkbox
    disabled
    checked
>
    checkedbox
</lk-checkbox>

Legacy checkbox

Velg og legg til en eller flere relevante emner.
<h3>Legacy checkbox</h3>
<label class="checkbox" for="Categories_0">
    <input type="checkbox" id="Categories_0" name="Categories" title="Kunst og kultur"
        value="" checked="">
    <span class="checkbox__label">Kunst og kultur</span>
</label>

<fieldset class="padding-top padding-top--small">
    <legend>Velg og legg til en eller flere relevante emner.</legend>

    <div>
        <label class="checkbox" for="Tags_0" style="display: inline-flex;">
            <input type="checkbox" id="Tags_0" name="Tags" title="Dans" value="fef4b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Dans</span>
        </label>
        <label class="checkbox" for="Tags_1" style="display: inline-flex;">
            <input type="checkbox" id="Tags_1" name="Tags" title="Film" value="fff4b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Film</span>
        </label>
        <label class="checkbox" for="Tags_2" style="display: inline-flex;">
            <input type="checkbox" id="Tags_2" name="Tags" title="Historielag"
                value="00f5b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Historielag</span>
        </label>
        <label class="checkbox" for="Tags_3" style="display: inline-flex;">
            <input type="checkbox" id="Tags_3" name="Tags" title="Korps" value="01f5b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Korps</span>
        </label>
        <label class="checkbox" for="Tags_4" style="display: inline-flex;">
            <input type="checkbox" id="Tags_4" name="Tags" title="Kunst" value="02f5b7bb-0126-e811-80e5-005056a24a4d"
                checked="">
            <span class="checkbox__label">Kunst</span>
        </label>
        <label class="checkbox" for="Tags_5" style="display: inline-flex;">
            <input type="checkbox" id="Tags_5" name="Tags" title="Leikarring"
                value="03f5b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Leikarring</span>
        </label>
        <label class="checkbox" for="Tags_6" style="display: inline-flex;">
            <input type="checkbox" id="Tags_6" name="Tags" title="Litteratur"
                value="04f5b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Litteratur</span>
        </label>
        <label class="checkbox" for="Tags_7" style="display: inline-flex;">
            <input type="checkbox" id="Tags_7" name="Tags" title="Musikk" value="05f5b7bb-0126-e811-80e5-005056a24a4d"
                checked="">
            <span class="checkbox__label">Musikk</span>
        </label>
        <label class="checkbox" for="Tags_8" style="display: inline-flex;">
            <input type="checkbox" id="Tags_8" name="Tags" title="Sangkor" value="06f5b7bb-0126-e811-80e5-005056a24a4d">
            <span class="checkbox__label">Sangkor</span>
        </label>
        <label class="checkbox" for="Tags_9" style="display: inline-flex;">
            <input type="checkbox" id="Tags_9" name="Tags" title="Teater" value="07f5b7bb-0126-e811-80e5-005056a24a4d"
                checked="">
            <span class="checkbox__label">Teater</span>
        </label>
    </div>
</fieldset>

Hvor finner jeg denne koden?