Kode

Radioknap

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>

        <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>

        <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>

    </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>

        <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>

        <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>

    </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="form-label">Radioknap med fejl</legend>
        <span class="form-error-message"
            id="example-radiobutton-error"><span
                class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>

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

        </div>

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

        </div>

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

        </div>

    </fieldset>
</div>

Lille radioknap

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <fieldset>
        <legend class="form-label">Lille radioknap</legend>

        <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>

        <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>

    </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>

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

        <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" required
                        id="textinput1" value="" name="text1" type="text">
                </div>
            </div>
        </div>

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

        <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" required
                        id="textinput2" value="" name="text2" type="text">
                </div>
            </div>
        </div>
    </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-js-target="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 aria-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'));

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.