Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Radioknap (Radio button)

Eksempel på radioknap
Liste med radioknapper

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <fieldset role="radiogroup">
        <legend class="form-label">
            Liste med radioknapper
        </legend>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-option1" name="radio-example"
                class="form-radio radio-large" value="v1">
            <label class="form-label" for="radiogroup-option1">Valg 1</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-option2" name="radio-example"
                class="form-radio radio-large" value="v2">
            <label class="form-label" for="radiogroup-option2">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.

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.

Varianter

Hjælpetekst

Kodeeksempel
<div class="form-group">
    <fieldset role="radiogroup">
        <legend class="form-label">
            Radioknapper med hjælpetekst
        </legend>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-helptext-option1" name="radio-helptext"
                class="form-radio radio-large" value="v1"
                aria-describedby="radiogroup-helptext-option1-hint">
            <label class="form-label" for="radiogroup-helptext-option1">Valg 1</label>
            <span class="form-hint" id="radiogroup-helptext-option1-hint">Dette er en
                hjælpetekst</span>
        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-helptext-option2" name="radio-helptext"
                class="form-radio radio-large" value="v2"
                aria-describedby="radiogroup-helptext-option2-hint">
            <label class="form-label" for="radiogroup-helptext-option2">Valg 2</label>
            <span class="form-hint" id="radiogroup-helptext-option2-hint">Dette er en
                hjælpetekst</span>
        </div>

    </fieldset>
</div>

Lille radioknap

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

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-small-option1" name="radio-small"
                class="form-radio" value="v1">
            <label class="form-label" for="radiogroup-small-option1">Valg 1</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-small-option2" name="radio-small"
                class="form-radio" value="v2">
            <label class="form-label" for="radiogroup-small-option2">Valg 2</label>

        </div>

    </fieldset>
</div>

Skjult indhold (Collapse)

Kodeeksempel
<div class="form-group js-radio-toggle-group">
    <fieldset role="radiogroup">
        <legend class="form-label">
            Vælg en radioknap
        </legend>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-collapse-option1" name="radio-collapse"
                class="form-radio radio-large" value="1" checked
                data-controls="#radiogroup-collapse-option1-collapse" data-expanded="true">
            <label class="form-label" for="radiogroup-collapse-option1">Radioknap viser
                indhold<span class="sr-only"> Udfyld informationer herunder</span></label>

        </div>
        <div id="radiogroup-collapse-option1-collapse" aria-hidden="false"
            class="radio-content radio-content-large">

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

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

        </div>

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

        </div>
        <div id="radiogroup-collapse-option2-collapse" 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 type="text" id="textinput2" name="text2"
                    class="form-input input-width-m" required>
            </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-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