Gå til sidens indhold
Det Fælles DesignsystemDevelop

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.

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

Åbn dette eksempel i et nyt vindue: error-message-radio
Eksempel på radioknapper med fejlmeddelelse
Sagen handler om Fejl: Vælg hvad sagen handler om

Varianter

Hjælpetekst

Radioknapgruppe med hjælpetekst

Åbn dette eksempel i et nyt vindue: radiobutton-group-helptext
Eksempel på radioknapgruppe med hjælpetekst
Radioknapper Dette er en hjælpetekst
Gå til eksemplets kode: radiobutton-group-helptext

Hjælpetekst til enkelte radioknapper

Åbn dette eksempel i et nyt vindue: radiobutton-helptext
Eksempel på radioknapper med hjælpetekst
Radioknapper
Dette er en hjælpetekst
Dette er en hjælpetekst
Gå til eksemplets kode: radiobutton-helptext

Skjult indhold (Collapse)

Åbn dette eksempel i et nyt vindue: radio-collapse
Eksempel på radioknapper med skjult indhold
Vælg en radioknap
Gå til eksemplets kode: radio-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)
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>

        <legend class="form-label">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

Vis dette eksempel i et nyt vindue: radiobutton-group-helptext
Kodeeksempel
<div class="form-group">
    <fieldset aria-describedby="radiogroup-group-helptext-hint ">

        <legend class="form-label">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>
Gå til eksemplets retningslinjer

Hjælpetekst til enkelte radioknapper

Vis dette eksempel i et nyt vindue: radiobutton-helptext
Kodeeksempel
<div class="form-group">
    <fieldset>

        <legend class="form-label">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>
Gå til eksemplets retningslinjer

Skjult indhold (Collapse)

Vis dette eksempel i et nyt vindue: radio-collapse
Kodeeksempel
<div class="form-group js-radio-toggle-group">
    <fieldset>

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

        <div class="hidden-content-wrapper">
            <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>

        <div class="hidden-content-wrapper">
            <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>
        </div>
    </fieldset>
</div>
Gå til eksemplets retningslinjer

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

Om custom elements

Radioknap har to custom elementer tilknyttet: <fds-radio-button> og <fds-radio-button-group>. Bemærk venligst, at <fds-radio-button> ikke er beregnet til at blive brugt alene, men kun inden for en gruppe.

Begge komponenter forventer, at de nødvendige HTML-elementer er til stede. Den enkelte checkbox kræver et input- og et label-element. Radioknap-gruppen kræver et fieldset, der omslutter gruppens legend og de enkelte radioknapper. Ved initialisering tilføjer custom elementet de nødvendige klasser, attributter og event listeners.

Hvis den forventede HTML mangler, forsøger komponenten at initialisere det, der er muligt, uden at flytte rundt på eksisterende elementer.

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-radio-button-group> med <div class="fds-radio-button-group">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.

Eksempler

Radioknapgruppe med label lavet med custom element

Åbn i et nyt vindue
Simpel radioknapgruppe 
<fds-radio-button-group>
    <fieldset>
        <legend>Simpel radioknapgruppe</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button1-example">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button2-example">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radio-button3-example">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Både ID og klasser kan undlades, hvormed elementet selv indsætter disse. Elementet kan derfor simplificeres til:

<fds-radio-button-group>
    <fieldset>
        <legend>Simpel radioknapgruppe</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="rad88bb6d70">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radad9bcfd4">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radd535ed7b">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Varianter

Fejl

<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.

Åbn i et nyt vindue
Radioknapgruppe med fejl Fejl besked 
<fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med fejl</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button-fejl1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button-fejl2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radio-button-fejl3">
            <label>Radioknap 3</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">Fejl besked</fds-error-message>
    </fieldset>
</fds-radio-button-group>

Attributter til <fds-error-message>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
icon-text Sæt en anden tekst på fejlikonet.
hidden Styrer synligheden af fejlmeddelelsen.

Events fra <fds-error-message>

Event Beskrivelse
error-message-visibility-changed Afsender en hændelse til forælderkomponenter, når synligheden ændres.
error-message-callback Afsender en hændelse til opdatering af forælderkomponenten.

Hjælpetekst

<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.

Hjælpetekst til enkelte radioknap

Åbn i et nyt vindue
Radioknapgruppe label Hjælpetekst til enkelte radioknap 
<fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe label</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button-example1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button-example2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radio-button-example3">
            <label>Radioknap 3</label>
            <fds-help-text id="help4fbcd007">Hjælpetekst til enkelte radioknap</fds-help-text>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Attributter til <fds-help-text>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
hidden Styrer synligheden af hjælpeteksten.

Events fra <fds-help-text>

Event Beskrivelse
help-text-callback Afsender en hændelse til opdatering af forælderkomponenten.

Radioknapgruppe med hjælpetekst

Åbn i et nyt vindue
Radioknapgruppe label Hjælpetekst til radioknapgruppen 
<fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe label</legend>
        <fds-help-text id="help6346b4dc">Hjælpetekst til radioknapgruppen</fds-help-text>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button1-helptext">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button2-helptext">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radio-button3-helptext">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Skjult indhold (Collapse)

Åbn i et nyt vindue
Radioknapgruppe med skjult indhold 
<fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med skjult indhold</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button-collapse1">
            <label>Vis indhold 1</label>
            <div class="radio-content" id="exp273864d6">
                <fds-input-wrapper>
                    <label class="form-label">Skjult inputfelt</label>
                    <input type="text" name="input-wrapper-collapse" id="inpac3def7f">
                </fds-input-wrapper>
            </div>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button-collapse2">
            <label>Vis indhold 2</label>
            <div class="radio-content" id="exp92708b07">
                <fds-checkbox>
                    <input type="checkbox" name="checkbox-example" id="checkbox-input-id2">
                    <label>Tjekbox label</label>
                </fds-checkbox>
            </div>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Deaktiveret radioknapgruppe

Åbn i et nyt vindue
Deactivated radioknapgruppe 
<fds-radio-button-group>
    <fieldset disabled>
        <legend>Deactivated radioknapgruppe</legend>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v1" id="radio-button-disabled1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v2" id="radio-button-disabled2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="radio-example" value="v3" id="radio-button-disabled3">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>

Konfiguration

fds-radio-button

Attributter

Attribut Beskrivelse
show-required-status Viser om tjekboksen er obligatorisk eller frivillig. Indsæt en tekst i attributten for at overskrive default-teksten.

Funktioner

Funktion Beskrivelse
init() Initialiserer komponenten manuelt, fx hvis komponenten har ready=”false”, eller hvis indholdet indsættes senere. Metoden kan kaldes flere gange uden at komponenten bør fejle.

fds-radio-button-group

Funktioner

Funktion Beskrivelse
init() Initialiserer komponenten manuelt, fx hvis indholdet indsættes senere. Metoden kan kaldes flere gange uden at komponenten bør fejle.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies