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.
<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>
<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
<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>