Radioknap (Radio button)

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)

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)

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.

Varianter

Hjælpetekst

Radioknapgruppe med hjælpetekst

Hjælpetekst til enkelte radioknapper

Skjult indhold (Collapse)

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)

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)

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

• Formular til kontaktoplysninger: Oplysninger om dig
• Trinformular til registrering: Tidligere registrering
• Trinformular til ansøgning: Oplysninger om ansøger
• Trinformular til ansøgning: Ansøgningens type

Referencer

• ISO 9241-143: Forms (2012)
• Kara Pernice: Radio Buttons: Select One by Default or Leave All Unselected? (2014)
• Jakob Nielsen: Checkboxes vs. Radio Buttons (2004)
• Raluca Budiu: Interaction Cost (2013)

Installation

HTML Struktur

<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

Hjælpetekst

Radioknapgruppe med hjælpetekst

<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

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

<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