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.


Komponenter

Radioknap (Radio button)

Radioknapper lader brugeren vælge én blandt flere muligheder.

Eksempel på radioknapper
Radioknapper

Sådan bruges komponenten

Anvendes til

Radioknapper giver brugeren mulighed for at vælge en enkelt værdi ud fra en synlig liste.

Når brugeren skal have overblik over sine mulige valg.

Når listen over mulige valg kan være på en mobilvisning.

Anvendes ikke til

Når brugeren skal kunne vælge mere end én værdi ud fra en synlig liste. Her skal du i stedet bruge tjekbokse.

Du bør overveje at anvende en dropdown, hvis antallet af mulige værdier er for mange til en mobilvisning.

Når brugeren skal kunne undlade at vælge en værdi.

Vejledning

Brugeren skal kunne tappe eller klikke på radioknappen eller dens label for at vælge dens værdi. Den fravælges, når en anden radioknap vælges.

Du bør opstille lister med radioknapper i lodret linje af hensyn til brugerens læseretning.

Sørg for at der er tilstrækkelig luft omkring den enkelte radioknap, så den er brugbar på touchskærme.

Vær forsigtig med at angive et standard valg, da det kan have en modsatrettet effekt: Brugeren kan føle sig manipuleret eller foretager ikke et bevidst valg.

Der bør være en overordnet label for hele listen af radioknapper.

Radioknapper bør altid kræve, at brugeren foretager et valg. I stedet for at lade brugeren skippe radioknapperne, så giv dem en neutral valgmulighed, der eventuelt er valgt som standard.

Sådan (do)

Eksempel på, hvordan radioknapper kan se ud

Sådan: Brug radioknapper, når der skal vælges 1 svar blandt 2-5 gensidigt udelukkende svarmuligheder (ISO, 2012, afsnit 8.6). Sæt som hovedregel altid én svarmulighed som default (Pernice, 2014).

Ikke sådan (don't)

Eksempel på, hvordan radioknapper ikke bør se ud

Ikke sådan: Brug ikke radioknapper, når der kan vælges flere svar i samme liste. Undgå at bryde konventioner og visuelle standardvisninger (Nielsen, 2004).

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Eksempel på radioknapper med fejlmeddelelse
Sagen handler om Fejl: Vælg hvad sagen handler om

Varianter

Hjælpetekst

Radioknapgruppe med hjælpetekst

Eksempel på radioknapgruppe med hjælpetekst
Radioknapper Dette er en hjælpetekst

Hjælpetekst til enkelte radioknapper

Eksempel på radioknapper med hjælpetekst
Radioknapper
Dette er en hjælpetekst
Dette er en hjælpetekst

Skjult indhold (Collapse)

Eksempel på radioknapper med skjult indhold
Vælg en radioknap

Anvendes til

Anvendes til at vise et ekstra felt, der er relevant afhængigt af den valgte radioknap. Fx kan du vise et e-mailfelt, når brugeren vælger at ville kontaktes pr. e-mail.

Anvendes ikke til

Anvendes ikke til at vise ekstra beskrivende/oplysende tekst eller billeder.

Vejledning

Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet, bør du overveje at fordele det ud over flere sider i stedet.

Sådan (do)
Eksempel på, hvordan en skjul og vis kan se ud

Sådan: Brug skjul og vis-funktionen i tilfælde, hvor brugerne skal vælge mellem at udfylde alternative felter, fx forskellige slags kontaktoplysninger.

Ikke sådan (don't)
Eksempel på, hvordan en skjul og vis ikke bør se ud

Ikke sådan: Brug ikke skjul og vis-funktionen til andet end inputelementer, da skærmlæsere ikke vil kunne læse andre skjulte elementer såsom brødtekst op.

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <fieldset aria-labelledby="radio-example-legend">

        <legend class="form-label" id="radio-example-legend">Radioknapper</legend>

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

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-option3" name="radio-example"
                class="form-radio" value="v3">
            <label class="form-label" for="radiogroup-option3">Valg 3</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.

Hjælpetekst

Radioknapgruppe med hjælpetekst

Kodeeksempel
<div class="form-group">
    <fieldset aria-labelledby="radio-group-helptext-legend"
        aria-describedby="radiogroup-group-helptext-hint ">

        <legend class="form-label" id="radio-group-helptext-legend">Radioknapper</legend>

        <span class="form-hint" id="radiogroup-group-helptext-hint">Dette er en
            hjælpetekst</span>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-group-helptext-option1"
                name="radio-group-helptext" class="form-radio" value="v1">
            <label class="form-label" for="radiogroup-group-helptext-option1">Første
                radioknap</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-group-helptext-option2"
                name="radio-group-helptext" class="form-radio" value="v2">
            <label class="form-label" for="radiogroup-group-helptext-option2">Anden
                radioknap</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-group-helptext-option3"
                name="radio-group-helptext" class="form-radio" value="v3">
            <label class="form-label" for="radiogroup-group-helptext-option3">Tredje
                radioknap</label>

        </div>

    </fieldset>
</div>

Hjælpetekst til enkelte radioknapper

Kodeeksempel
<div class="form-group">
    <fieldset aria-labelledby="radio-helptext-legend">

        <legend class="form-label" id="radio-helptext-legend">Radioknapper</legend>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-helptext-option1" name="radio-helptext"
                class="form-radio" value="v1"
                aria-describedby="radiogroup-helptext-option1-hint">
            <label class="form-label" for="radiogroup-helptext-option1">Første
                radioknap</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" value="v2"
                aria-describedby="radiogroup-helptext-option2-hint">
            <label class="form-label" for="radiogroup-helptext-option2">Anden
                radioknap</label>
            <span class="form-hint" id="radiogroup-helptext-option2-hint">Dette er en
                hjælpetekst</span>
        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-helptext-option3" name="radio-helptext"
                class="form-radio" value="v3">
            <label class="form-label" for="radiogroup-helptext-option3">Tredje
                radioknap</label>

        </div>

    </fieldset>
</div>

Skjult indhold (Collapse)

Kodeeksempel
<div class="form-group js-radio-toggle-group">
    <fieldset aria-labelledby="radio-collapse-legend">

        <legend class="form-label" id="radio-collapse-legend">Vælg en radioknap</legend>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-collapse-option1" name="radio-collapse"
                class="form-radio" 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">

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

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

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