Kode

Radioknap (Radio button)

Hjælpetekst
Lille radioknap
Skjult indhold (Collapse)

Liste med radioknapper

Valg 1
Valg 2

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group">
    <fieldset>
        <legend class="form-label">Liste med radioknapper</legend>
        <ul class="nobullet-list">
            <li>
                <div class="form-group-radio">
                    <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>

                </div>
            </li>
            <li>
                <div class="form-group-radio">
                    <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>

                </div>
            </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="form-label">Radioknap med hjælpetekst</legend>
        <ul class="nobullet-list">
            <li>
                <div class="form-group-radio">
                    <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>
                </div>
            </li>
            <li>
                <div class="form-group-radio">
                    <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>
                </div>
            </li>
        </ul>
    </fieldset>
</div>

Lille radioknap

Vis dette eksempel i et nyt vindue

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

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

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

Skjult indhold (Collapse)

Vis dette eksempel i et nyt vindue

<div class="js-radio-toggle-group">
    <fieldset>
        <legend class="form-label">Vælg en radioknap</legend>
        <ul class="nobullet-list">
            <li>
                <div class="form-group-radio">
                    <input id="id-radio1" type="radio" name="radio-group1"
                        value="1" class="form-radio radio-large " checked
                        data-controls="#collapse-radio1"
                        data-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>

                <div id="collapse-radio1" aria-hidden="true"
                    class="radio-content radio-content-large">
                    <div class="form-group">

                        <label class="form-label" for="textinput1">
                            Inputfelt med label
                        </label>

                        <input class="form-input input-width-m"
                            id="textinput1" name="text1" type="text"
                            required />

                    </div>
                </div>
            </li>
            <li>
                <div class="form-group-radio">
                    <input id="id-radio2" type="radio" name="radio-group1"
                        value="2" class="form-radio radio-large "
                        data-controls="#collapse-radio2"
                        data-expanded="false" />
                    <label for="id-radio2" id="form-label-id-radio2"
                        class="">Radioknap viser andet indhold <span
                            class="sr-only">Udfyld informationer
                            herunder</span></label>

                </div>

                <div id="collapse-radio2" aria-hidden="true"
                    class="radio-content radio-content-large">
                    <div class="form-group">

                        <label class="form-label" for="textinput2">
                            Inputfelt med anden label
                        </label>

                        <input class="form-input input-width-m"
                            id="textinput2" name="text2" type="text"
                            required />

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

Retningslinjer for radioknap med skjult indhold

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

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

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

id="id-of-target-to-collapse"
aria-hidden="false" hvis indholdet vises og aria-hidden="true" hvis indholdet skjules

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')).init();

Events

Event key	Element	Beskrivelse
fds.collapse.expanded	`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.collapsed	`input.js-radio-toggle-group`	Når en skjul/vis komponent bliver foldet ind, bliver eventet fds.collapse.close udløst på input elementet.