Struktur
<lk-checkbox-group>
<fieldset>
<legend/>
(div)
(legend/)
(lk-help-text)
(slot name="help-text" /)
(lk-help-text)
(/div)
<slot/>
[
<label>
<input/>
<span/>
(input/)
</label>
]
(p/)
</fieldset>
</lk-checkbox-group>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid* guid-list |
string array:string |
""guid+checkbox-labels |
<label> sine for= og <input> sine id= (evt. prefiks ved bruk av guid=);og evt. <fieldset> sin id=) |
| group-name names |
string array:string |
"" | <input> sine name= |
| group-label | string | "" | Tekst til <legend> |
| checkbox-labels | array:string | "" | Tekster til <input> sine <span> |
| error-message | string | "" | Tekst til <p> |
| values | array:string | checkbox-labels |
<input> sine value= |
| required | boolean | false | <input> sine required= |
| disabled | boolean | false | <input> sine disabled= |
| hidden-field-names | array:string | "" | Legger til en <input type="hidden" name="{hidden-field-names[i]}"> for hver checkbox |
| group-class | string | "" | Legges til i <legend> sin class= |
| checked-values | array:string | "" | |
| checked-guid-list | array:string | "" | |
| small | boolean | "" | Legger til "checkbox--small" i <label> sine 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" |
| show-dependant-if-blank hide-dependant-if-blank |
boolean | false | Ref. "betinget visning av felter" |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert rett etter <legend> inni <fieldset> |
| help-text | Blir plassert rett etter <legend> inni en <div class="title-with-helptext-wrapper"> |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean | |
| getChecked | (attr:string = "value") | array | |
| checkValue | (value:string) | null | |
| uncheckValue | (value:string) | null | |
| checkItems | (guidList:JSON-array-string) | null | |
| uncheckItems | (guidList:JSON-array-string) | null | |
| adjustDependants | () | Viser/skjuler det som komponenten skal styre |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-checkbox-group
guid="indepentantRadio1"
group-name='indepentantRadio1'
group-label='Standard checkbox group'
checkbox-labels='["Ja","Jo","yep"]'
></lk-checkbox-group>
<lk-checkbox-group
guid="indepentantRadio2"
group-name='indepentantRadio1'
group-label='Ugyldig checkbox group'
checkbox-labels='["Ja","Jo","yep"]'
error-message="Denne må fylles ut"
required
></lk-checkbox-group>
<lk-checkbox-group
guid="indepentantRadio3"
group-name='indepentantRadio3'
group-label='deactivert checkbox group'
checkbox-labels='["Nope","Niks","Neida"]'
checked-values='["Nope"]'
disabled
></lk-checkbox-group>