Gå til sidens indhold
Det Fælles Designsystem

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)

Åbn dette eksempel i et nyt vindue: radiobutton
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.

Varianter

Hjælpetekst

Vis dette eksempel i et nyt vindue: radiobutton-helptext
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

Vis dette eksempel i et nyt vindue: radiobutton-small
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)

Vis dette eksempel i et nyt vindue: radio-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

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.