Radioknapper

Radio-button-input element

Attributter

Attributt Tillatte verdier / eksempler / kommentar
guid input-elementenes id-prefix
guid-list Default: guid+[value]

String i JSON format.
input-elementenes id.
group-name input-elementenes name
group-label legend/h4
radio-labels String i JSON format.
label-elementenes tekst.
values Default: = radio-labels

String i JSON format.
input-elementenes value.
error-message
required true/false
checked-item Value som skal være sjekket av ved innlasting.
vertical-align Default: true
group-class Default: section-title

legend/h4 sin css-klasse.
dependant-element
dependant-id
dependant-guid
Brukes til å styre:
- class="no-display" til elementet basert på show-dependant-if-value/hide-dependant-if-value
- required=true til elementet basert på data-auto-required
Kun et av disse trenger å fylles ut, med følgende prioritet: dependant-element, dependant-id, dependant-guid
show-dependant-if-value
hide-dependant-if-value
Bruk én av disse. show-dependant-if-value vil overstyre hide-dependant-if-value.
Default: hvis ingen av disse fylles ut vil det automatisk tilsvare show-dependant-if-value="true"

Radio group

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>