Radioknapper Radio-button-input element.

Struktur

<lk-radio-group>
  <fieldset>

    (div)

      <legend/>

      (lk-help-text)
        (slot name="help-text" /)
      (/lk-help-text)
    (/div)

    <slot/>

    [
      <label>
        <input/>
        <span/>
      </label>
    ]

    <p/>

  </fieldset>
</lk-radio-group>

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
guid*
guid-list
string
array:string
""
guid+radio-labels
Prefiks for <input> sine id=. Evt. <input> sine id=
group-name string "" <input> sine name=
group-label string "" Tekst til <leged>
radio-labels array:string "" Tekster til <input>'s
error-message string ""
required boolean false <input> sine required=
disabled boolean false <input> sine disabled=
values array:string radio-labels <input> sine values=
group-class string "" <legend> sin class=
vertical-align boolean true
checked-item value:string ""
dependant-ids
dependant-guids
dependant-classes
array:string ""
dependant-element HTMLElement ""
dependant-id
dependant-guid
dependant-class
string ""
show-dependant-if-value
hide-dependant-if-value
string ""
show-dependant-if-blank
hide-dependant-if-blank
boolean false

Spalter

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

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert øverst inni <fieldset>. Kan brukes istede for group-label=
help-text Plasseres rett etter <legend> i en <div> wrapper

Metoder

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

Metode Parameter Retur Beskrivelse
validate () valid:boolean
getChecked (attr: string = "value") attrValue:string
uncheck () 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-radio-group
    guid="indepentantRadio1"
    group-name='indepentantRadio1'
    group-label='Skal divven vises?'
    radio-labels='["Ja","Jo kanskje","Nei"]'
    dependant-id='dependantDiv1'
    hide-dependant-if-value='Nei'
></lk-radio-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-radio-group
    guid="indepentantRadio2"
    group-name='indepentantRadio2'
    group-label='Skal divven vises?'
    radio-labels='["Ja","Neppe det","Nei"]'
    dependant-id='dependantDiv2'
    show-dependant-if-value='Ja'
></lk-radio-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?