Komponenter

Radioknap (Radio button)

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

Åbn dette eksempel i et nyt vindue

Radioknapper

Valg 1

Valg 2

Valg 3

Installation

HTML Struktur

<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

<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

<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

<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

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Åbn eksempel i nyt vindue

Simpel radioknapgruppe

Radioknap 1

Radioknap 2

Radioknap 3

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Simpel radioknapgruppe</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v1" id="radio-button1-example">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v2" id="radio-button2-example">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v3" id="radio-button3-example">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Simpel radioknapgruppe</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v1" id="radio-button1-example" class="form-radio">
            <label class="form-label" for="radio-button1-example">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v2" id="radio-button2-example" class="form-radio">
            <label class="form-label" for="radio-button2-example">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-default-example" value="v3" id="radio-button3-example" class="form-radio">
            <label class="form-label" for="radio-button3-example">Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

fds-radio-button er ikke beregnet til at blive brugt alene, men kun inden for en fds-radio-button-group.

Varianter

Fejl

Åbn eksempel i nyt vindue

Radioknapgruppe med fejl

Radioknap 1

Radioknap 2

Radioknap 3

Vælg en mulighed

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med fejl</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3">
            <label>Radioknap 3</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">Vælg en mulighed</fds-error-message>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset aria-describedby="errora9bcb9f4">
        <legend>Radioknapgruppe med fejl</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1" class="form-radio">
            <label class="form-label" for="radio-button-fejl1">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2" class="form-radio">
            <label class="form-label" for="radio-button-fejl2">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3" class="form-radio">
            <label class="form-label" for="radio-button-fejl3">Radioknap 3</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Vælg en mulighed</span>
        </fds-error-message>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Hjælpetekst

Hjælpetekst til enkelte radioknap

Åbn eksempel i nyt vindue

Radioknapgruppe label

Radioknap 1

Radioknap 2

Radioknap 3

Hjælpetekst til enkelte radioknap

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe label</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-example" value="v1" id="radio-button-example1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-example" value="v2" id="radio-button-example2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-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>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe label</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-example" value="v1" id="radio-button-example1" class="form-radio">
            <label class="form-label" for="radio-button-example1">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-example" value="v2" id="radio-button-example2" class="form-radio">
            <label class="form-label" for="radio-button-example2">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-group-helptext-example" value="v3" id="radio-button-example3" class="form-radio" aria-describedby="help4fbcd007">
            <label class="form-label" for="radio-button-example3">Radioknap 3</label>
            <fds-help-text id="help4fbcd007" class="help-text">Hjælpetekst til enkelte radioknap</fds-help-text>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Radioknapgruppe med hjælpetekst

Åbn eksempel i nyt vindue

Radioknapgruppe label

Hjælpetekst til radioknapgruppen

Radioknap 1

Radioknap 2

Radioknap 3

                    Web Component
                    Genereret HTML

                    
                        
                            <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="fds-radio-helptext-example" value="v1" id="radio-button1-helptext">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-helptext-example" value="v2" id="radio-button2-helptext">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-helptext-example" value="v3" id="radio-button3-helptext">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset aria-describedby="help6346b4dc">
        <legend>Radioknapgruppe label</legend>
        <fds-help-text id="help6346b4dc" class="help-text">Hjælpetekst til radioknapgruppen</fds-help-text>
        <fds-radio-button>
            <input type="radio" name="fds-radio-helptext-example" value="v1" id="radio-button1-helptext" class="form-radio">
            <label class="form-label" for="radio-button1-helptext">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-helptext-example" value="v2" id="radio-button2-helptext" class="form-radio">
            <label class="form-label" for="radio-button2-helptext">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-helptext-example" value="v3" id="radio-button3-helptext" class="form-radio">
            <label class="form-label" for="radio-button3-helptext">Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Skjult indhold (Collapse)

Åbn eksempel i nyt vindue

Radioknapgruppe med skjult indhold

Vis indhold 1

Skjult inputfelt

Vis indhold 2

Tjekbox label

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med skjult indhold</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-collapse-example" value="v1" id="radio-button-collapse1">
            <label>Vis indhold 1</label>
            <div class="radio-content" id="exp273864d6">
                <fds-input>
                    <label class="form-label">Skjult inputfelt</label>
                    <input type="text" name="fds-radio-collapse-example-input" id="inpac3def7f">
                </fds-input>
            </div>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-collapse-example" value="v2" id="radio-button-collapse2">
            <label>Vis indhold 2</label>
            <div class="radio-content" id="exp92708b07">
                <fds-checkbox>
                    <input type="checkbox" name="fds-radio-collapse-example-checkbox" id="checkbox-input-id2">
                    <label>Tjekbox label</label>
                </fds-checkbox>
            </div>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med skjult indhold</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-collapse-example" value="v1" id="radio-button-collapse1" class="form-radio" data-aria-controls="exp273864d6" data-aria-expanded="false">
            <label class="form-label" for="radio-button-collapse1">Vis indhold 1</label>
            <div class="radio-content collapsed" id="exp273864d6" aria-hidden="true">
                <fds-input>
                    <label class="form-label" for="inpac3def7f">Skjult inputfelt</label>
                    <input type="text" name="fds-radio-collapse-example-input" id="inpac3def7f">
                </fds-input>
            </div>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-collapse-example" value="v2" id="radio-button-collapse2" class="form-radio" data-aria-controls="exp92708b07" data-aria-expanded="false">
            <label class="form-label" for="radio-button-collapse2">Vis indhold 2</label>
            <div class="radio-content collapsed" id="exp92708b07" aria-hidden="true">
                <fds-checkbox>
                    <input type="checkbox" name="fds-radio-collapse-example-checkbox" id="checkbox-input-id2" class="form-checkbox">
                    <label class="form-label" for="checkbox-input-id2">Tjekbox label</label>
                </fds-checkbox>
            </div>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Deaktiveret radioknapgruppe

Åbn eksempel i nyt vindue

Disabled radioknapper

Radioknap 1

Radioknap 2

Radioknap 3

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset disabled>
        <legend>Disabled radioknapper</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v1" id="radio-button-disabled1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v2" id="radio-button-disabled2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v3" id="radio-button-disabled3">
            <label>Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset disabled="">
        <legend>Disabled radioknapper</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v1" id="radio-button-disabled1" class="form-radio">
            <label class="form-label" for="radio-button-disabled1">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v2" id="radio-button-disabled2" class="form-radio">
            <label class="form-label" for="radio-button-disabled2">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-disabled-example" value="v3" id="radio-button-disabled3" class="form-radio">
            <label class="form-label" for="radio-button-disabled3">Radioknap 3</label>
        </fds-radio-button>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Konfiguration

fds-radio-button kræver et input- og et label-element. fds-radio-button-group kræver et fieldset-element, der omslutter gruppens legend og de enkelte radioknapper.

fds-radio-button

Attributter

Attribut	Beskrivelse
ready	Sæt til `"false"` for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end `"false"`, for at initialisere komponenten med det samme.

Funktioner

Funktion	Beskrivelse
collapseContent()	Fold indholdet i `div.radio-content` sammen, hvis dette findes i radioknappen.

Events

Event	Beskrivelse
radio-changed	Udløses når radioknappens valgte tilstand ændres. `event.detail.checked` angiver, om den er valgt.

fds-help-text

Attributter

Attribut	Beskrivelse
id	ID for hjælpeteksten. Hvis denne er udeladt, genereres et tilfældigt ID.
hidden	Skjuler hjælpeteksten. Skal sættes til `true` eller være tom for at tage effekt.

Events

Event	Beskrivelse
help-text-callback	Udløses på det omsluttende element, når hjælpeteksten tilføjes, fjernes, eller dens `hidden`-attribut ændres.
help-text-visibility-changed	Udløses på det omsluttende element, når `hidden`-attributten ændres. `event.detail.helptextId` indeholder hjælpetekstens ID, og `event.detail.isHidden` angiver, om den er skjult.

fds-error-message

Attributter

Attribut	Beskrivelse
id	ID for fejlbeskeden. Hvis denne er udeladt, genereres et tilfældigt ID.
icon-text	Skærmlæsertekst for ikonet. Default er `Fejl`.
hidden	Skjuler fejlbeskeden. Skal sættes til `true` eller være tom for at tage effekt.
targets	Bruges kun af `fds-date-input`. Angiv ID'er eller navne på de inputfelter, fejlbeskeden er relateret til, separeret med komma.
message	Teksten der skal vises i fejlbeskeden. Kan også angives som indhold i elementet.

Events

Event	Beskrivelse
error-message-callback	Udløses på det omsluttende element, når fejlbeskeden tilføjes, fjernes, eller en af dens attributter ændres.
error-message-visibility-changed	Udløses på det omsluttende element, når `hidden`-attributten ændres. `event.detail.errorId` indeholder fejlbeskedens ID, og `event.detail.isHidden` angiver, om den er skjult.

Web Components i beta-version

Radioknap (Radio button)

Sådan bruges komponenten

Anvendes til

Anvendes ikke til

Vejledning

Sådan (do)

Ikke sådan (don't)

Fejlmeddelelse

Varianter

Hjælpetekst

Radioknapgruppe med hjælpetekst

Hjælpetekst til enkelte radioknapper

Skjult indhold (Collapse)

Anvendes til

Anvendes ikke til

Vejledning

Sådan (do)

Ikke sådan (don't)

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

JavaScript

Events

Hjælpetekst

Radioknapgruppe med hjælpetekst

Hjælpetekst til enkelte radioknapper

Skjult indhold (Collapse)

Web Component-koden er i beta

Om denne komponent

Varianter

Fejl

Hjælpetekst

Hjælpetekst til enkelte radioknap

Radioknapgruppe med hjælpetekst

Skjult indhold (Collapse)

Deaktiveret radioknapgruppe

Konfiguration

fds-radio-button

Attributter

Funktioner

Events

fds-help-text

Attributter

Events

fds-error-message

Attributter

Events