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

Åbn dette eksempel i et nyt vindue: radiobutton
Liste med radioknapper

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group">
    <fieldset>
        <legend class="form-label">Liste med radioknapper</legend>
        <ul class="nobullet-list">
            <li>
                <input id="radio-1" type="radio" name="radio" value="v1"
                    class="form-radio  radio-large " />
                <label for="radio-1" id="form-label-radio-1" class="">Valg
                    1 </label>

            </li>
            <li>
                <input id="radio-2" type="radio" name="radio" value="v2"
                    class="form-radio  radio-large " />
                <label for="radio-2" id="form-label-radio-2" class="">Valg
                    2 </label>

            </li>
        </ul>
    </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 
<div class="form-group">
    <fieldset>
        <legend class="form-label">Radioknap med hjælpetekst</legend>
        <ul class="nobullet-list">
            <li>
                <input id="radio-helptext-1" type="radio"
                    name="radio-helptext" value="v1"
                    aria-labelledby="form-label-radio-helptext-1 helptext-radio-helptext-1"
                    class="form-radio  radio-large " />
                <label for="radio-helptext-1"
                    id="form-label-radio-helptext-1" class="">Valg 1
                </label>
                <span class="form-hint"
                    id="helptext-radio-helptext-1">Dette er en
                    hjælpetekst</span>
            </li>
            <li>
                <input id="radio-helptext-2" type="radio"
                    name="radio-helptext" value="v2"
                    aria-labelledby="form-label-radio-helptext-2 helptext-radio-helptext-2"
                    class="form-radio  radio-large " />
                <label for="radio-helptext-2"
                    id="form-label-radio-helptext-2" class="">Valg 2
                </label>
                <span class="form-hint"
                    id="helptext-radio-helptext-2">Dette er en
                    hjælpetekst</span>
            </li>
        </ul>
    </fieldset>
</div>

Radioknap med fejlmeddelelse

Vis dette eksempel i et nyt vindue: radiobutton-error 
<div class="form-group form-error">
    <fieldset aria-describedby="example-radiobutton-error">
        <legend class="form-label">Radioknap med fejl</legend>
        <span class="form-error-message"
            id="example-radiobutton-error"><span
                class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>
        <ul class="nobullet-list">
            <li>
                <input id="weekly" type="radio" name="often-pay"
                    value="weekly" class="form-radio  radio-large " />
                <label for="weekly" id="form-label-weekly"
                    class="">Ugentligt </label>

            </li>
            <li>
                <input id="fortnightly" type="radio" name="often-pay"
                    value="fortnightly" class="form-radio  radio-large " />
                <label for="fortnightly" id="form-label-fortnightly"
                    class="">Hver fjortende dag </label>

            </li>
            <li>
                <input id="monthly" type="radio" name="often-pay"
                    value="monthly" class="form-radio  radio-large " />
                <label for="monthly" id="form-label-monthly"
                    class="">Månedligt </label>

            </li>
        </ul>
    </fieldset>
</div>

Lille radioknap

Vis dette eksempel i et nyt vindue: radiobutton-small 
<div class="form-group">
    <fieldset>
        <legend class="form-label">Lille radioknap</legend>
        <ul class="nobullet-list">
            <li>
                <input id="smallradio1" type="radio" name="smallradio"
                    value="1" class="form-radio   " />
                <label for="smallradio1" id="form-label-smallradio1"
                    class="">Valg 1 </label>

            </li>
            <li>
                <input id="smallradio2" type="radio" name="smallradio"
                    value="0" class="form-radio   " />
                <label for="smallradio2" id="form-label-smallradio2"
                    class="">Valg 2 </label>

            </li>
        </ul>
    </fieldset>
</div>

Skjult indhold (Collapse)

Vis dette eksempel i et nyt vindue: radio-collapse 
<div class="js-radio-toggle-group">
    <fieldset>
        <legend class="form-label">Vælg en radioknap</legend>
        <ul class="nobullet-list">
            <li>
                <input id="id-radio1" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large " checked
                    data-js-target='#collapse-radio1'
                    aria-controls='collapse-radio1'
                    aria-expanded='false' />
                <label for="id-radio1" id="form-label-id-radio1"
                    class="">Radioknap viser indhold <span
                        class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio1" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">
                        <div class="form-group">
                            <label class="form-label " for="textinput1">
                                Inputfelt med label
                            </label>

                            <input class="form-input input-width-m"
                                required id="textinput1" value=""
                                name="text1" type="text">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <input id="id-radio2" type="radio" name="radio-group1"
                    value="Value" class="form-radio  radio-large "
                    data-js-target='#collapse-radio2' />
                <label for="id-radio2" id="form-label-id-radio2"
                    class="">Radioknap viser andet indhold <span
                        class="sr-only">Udfyld informationer
                        herunder</span></label>

                <div id="collapse-radio2" aria-hidden="true"
                    class="box-border-l collapsed">
                    <div class="py-4">
                        <div class="form-group">
                            <label class="form-label " for="textinput2">
                                Inputfelt med anden label
                            </label>

                            <input class="form-input input-width-m"
                                required id="textinput2" value=""
                                name="text2" type="text">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </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-js-target="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 aria-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'));

Events

Event key Element Beskrivelse
fds.collapse.open 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.close input.js-radio-toggle-group Når en skjul/vis komponent bliver foldet ind, bliver eventet fds.collapse.close udløst på input elementet.