Kode

Radioknap

Liste med radioknapper

Valg 1
Valg 2

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group">
    <fieldset>
        <legend class="h5">Liste med radioknapper</legend>
        <ul class="nobullet-list">
            <li>
                <input id="radio-1" type="radio" name="radio" value="v1"
                    class="form-radio  radio-large " />
                <label for="radio-1" id="form-label-radio-1" class="">Valg
                    1 </label>

            </li>
            <li>
                <input id="radio-2" type="radio" name="radio" value="v2"
                    class="form-radio  radio-large " />
                <label for="radio-2" id="form-label-radio-2" class="">Valg
                    2 </label>

            </li>
        </ul>
    </fieldset>
</div>

Indsæt altid to eller flere radioknapper i et fieldset inklusive legend.

Giv hver radioknap sit eget id og angiv samme værdi til det tilhørende label.

name attributten bør have samme værdi for alle radioknapper i en liste.

Radioknappernes design er ændret i forhold til standardvisningen for at gøre dem tydeligere og øge deres visuelle respons til brugerens interaktion.

Varianter

Hjælpetekst

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <fieldset>
        <legend class="h5">Radioknap med hjælpetekst</legend>
        <ul class="nobullet-list">
            <li>
                <input id="radio-helptext-1" type="radio"
                    name="radio-helptext" value="v1"
                    aria-labelledby="form-label-radio-helptext-1 helptext-radio-helptext-1"
                    class="form-radio  radio-large " />
                <label for="radio-helptext-1"
                    id="form-label-radio-helptext-1" class="">Valg 1
                </label>
                <span class="form-hint"
                    id="helptext-radio-helptext-1">Dette er en
                    hjælpetekst</span>
            </li>
            <li>
                <input id="radio-helptext-2" type="radio"
                    name="radio-helptext" value="v2"
                    aria-labelledby="form-label-radio-helptext-2 helptext-radio-helptext-2"
                    class="form-radio  radio-large " />
                <label for="radio-helptext-2"
                    id="form-label-radio-helptext-2" class="">Valg 2
                </label>
                <span class="form-hint"
                    id="helptext-radio-helptext-2">Dette er en
                    hjælpetekst</span>
            </li>
        </ul>
    </fieldset>
</div>

Radioknap med fejlmeddelelse

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="example-radiobutton-error">
        <legend class="h5">Radioknap med fejl</legend>
        <span class="form-error-message"
            id="example-radiobutton-error"><span
                class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>
        <ul class="nobullet-list">
            <li>
                <input id="weekly" type="radio" name="often-pay"
                    value="weekly" class="form-radio  radio-large " />
                <label for="weekly" id="form-label-weekly"
                    class="">Ugentligt </label>

            </li>
            <li>
                <input id="fortnightly" type="radio" name="often-pay"
                    value="fortnightly" class="form-radio  radio-large " />
                <label for="fortnightly" id="form-label-fortnightly"
                    class="">Hver fjortende dag </label>

            </li>
            <li>
                <input id="monthly" type="radio" name="often-pay"
                    value="monthly" class="form-radio  radio-large " />
                <label for="monthly" id="form-label-monthly"
                    class="">Månedligt </label>

            </li>
        </ul>
    </fieldset>
</div>

Lille radioknap

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <fieldset>
        <legend class="h5">Lille radioknap</legend>
        <ul class="nobullet-list">
            <li>
                <input id="smallradio1" type="radio" name="smallradio"
                    value="1" class="form-radio   " />
                <label for="smallradio1" id="form-label-smallradio1"
                    class="">Valg 1 </label>

            </li>
            <li>
                <input id="smallradio2" type="radio" name="smallradio"
                    value="0" class="form-radio   " />
                <label for="smallradio2" id="form-label-smallradio2"
                    class="">Valg 2 </label>

            </li>
        </ul>
    </fieldset>
</div>

Skjult indhold (Collapse)

Vis dette eksempel i et nyt vindue

<div class="js-radio-toggle-group">
    <fieldset>
        <legend class="h4">Vælg en radioknap</legend>
        <ul class="nobullet-list">
            <li>
                <input id="id-radio1" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large " checked
                    data-js-target='#collapse-radio1'
                    aria-controls='collapse-radio1'
                    aria-expanded='false' />
                <label for="id-radio1" id="form-label-id-radio1"
                    class="">Radioknap viser indhold <span
                        class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio1" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">
                        <div class="form-group">
                            <label class="form-label " for="textinput1">
                                Inputfelt med label
                            </label>

                            <input class="form-input input-width-m"
                                id="textinput1" value="" name="text1"
                                type="text">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <input id="id-radio2" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large "
                    data-js-target='#collapse-radio2' />
                <label for="id-radio2" id="form-label-id-radio2"
                    class="">Radioknap viser andet indhold <span
                        class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio2" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">
                        <div class="form-group">
                            <label class="form-label " for="textinput2">
                                Inputfelt med anden label
                            </label>

                            <input class="form-input input-width-m"
                                id="textinput2" value="" name="text2"
                                type="text">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </fieldset>
</div>

Retningslinjer

For at initialisere collapse funktionaliteten på en checkbox skal input[type=checkbox] have følgende:

Klassen 'js-checkbox-toggle-content'. Denne klasse gør at funktionaliteten bliver initialiseret.
Attributten data-js-target="id-of-target-to-collapse": denne attribute skal have id’et på det element som skal vises på tjekboksen er aktiveret.
Hvis man ønsker at tjekboksen skal være valgt fra starten af, skal den have attributten 'checked'.
aria-controls="id-of-target-to-collapse"

Det element som skal collapses/expandes skal have følgende:

id=”id-of-target-to-collapse”
aria-hidden="true/false"

JavaScript

Radioknapper med skjult indhold kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.RadioToggleGroup(document.getElementById('DIV-CONTAINER-ID'));

Events

Event key	Element	Beskrivelse
fds.collapse.open	`input.js-radio-toggle-group`	Når en skjul/vis komponent bliver foldet ud, bliver eventet fds.collapse.open udløst på input elementet.
fds.collapse.close	`input.js-radio-toggle-group`	Når en skjul/vis komponent bliver foldet ind, bliver eventet fds.collapse.close udløst på input elementet.