Checkboks gruppe Flere avmerkingsbokser (inputs).

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

Eksempler

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

Vises, eller ikke vises. Det er spørsmålet!

Vises, eller ikke vises. Det er spørsmålet!

<lk-checkbox-group
    guid="indepentantRadio1"
    group-name='indepentantRadio1'
    hidden-field-names='["indepentantRadio1[0].hidden", "indepentantRadio1[1].hidden", "indepentantRadio1[2].hidden"]'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Jo kanskje","Nei"]'
    dependant-id='dependantDiv1'
    hide-dependant-if-value='Nei'
></lk-checkbox-group>

<div id="dependantDiv1" class="no-display background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired1"
        input-name="automagiskRequired1"
        preset="personalid"
        data-auto-required>
    </lk-input-block>
</div>


<lk-checkbox-group
    guid="indepentantRadio2"
    group-name='indepentantRadio2'
    group-label='Skal divven vises?'
    checkbox-labels='["Ja","Neppe det","Nei"]'
    dependant-id='dependantDiv2'
    show-dependant-if-value='Ja'
></lk-checkbox-group>

<div id="dependantDiv2" class="background--tint-blue padding--medium">
    <p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
    <lk-input-block 
        guid="automagiskRequired2"
        input-name="automagiskRequired2"
        preset="personalid"
        required
        data-auto-required>
    </lk-input-block>
</div>

Hvor finner jeg denne koden?