Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Radioknap (Radio button)
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="form-group">
<fieldset role="radiogroup">
<legend class="form-label">
Liste med radioknapper
</legend>
<div class="form-group-radio">
<input type="radio" id="radiogroup-option1" name="radio-example"
class="form-radio radio-large" 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 radio-large" value="v2">
<label class="form-label" for="radiogroup-option2">Valg 2</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.
Varianter
Hjælpetekst
<div class="form-group">
<fieldset role="radiogroup">
<legend class="form-label">
Radioknapper med hjælpetekst
</legend>
<div class="form-group-radio">
<input type="radio" id="radiogroup-helptext-option1" name="radio-helptext"
class="form-radio radio-large" value="v1"
aria-describedby="radiogroup-helptext-option1-hint">
<label class="form-label" for="radiogroup-helptext-option1">Valg 1</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 radio-large" value="v2"
aria-describedby="radiogroup-helptext-option2-hint">
<label class="form-label" for="radiogroup-helptext-option2">Valg 2</label>
<span class="form-hint" id="radiogroup-helptext-option2-hint">Dette er en
hjælpetekst</span>
</div>
</fieldset>
</div>
Lille radioknap
<div class="form-group">
<fieldset role="radiogroup">
<legend class="form-label">
Lille radioknap
</legend>
<div class="form-group-radio">
<input type="radio" id="radiogroup-small-option1" name="radio-small"
class="form-radio" value="v1">
<label class="form-label" for="radiogroup-small-option1">Valg 1</label>
</div>
<div class="form-group-radio">
<input type="radio" id="radiogroup-small-option2" name="radio-small"
class="form-radio" value="v2">
<label class="form-label" for="radiogroup-small-option2">Valg 2</label>
</div>
</fieldset>
</div>
Skjult indhold (Collapse)
<div class="form-group js-radio-toggle-group">
<fieldset role="radiogroup">
<legend class="form-label">
Vælg en radioknap
</legend>
<div class="form-group-radio">
<input type="radio" id="radiogroup-collapse-option1" name="radio-collapse"
class="form-radio radio-large" 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 radio-content-large">
<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 radio-large" 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 radio-content-large">
<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>
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-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
samtdata-expanded="true"
. Indholdselementet bør have attributtenaria-hidden="false"
Det element som skal collapses/expandes skal have følgende:
id="id-of-target-to-collapse"
aria-hidden="false"
hvis indholdet vises ogaria-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')).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. |