Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Radioknap
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="form-group">
<fieldset>
<legend class="h5">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 atributten 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>
<legend class="h5">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
<div class="form-group form-error">
<fieldset aria-describedby="example-radiobutton-error">
<legend class="h5">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
<div class="form-group">
<fieldset>
<legend class="h5">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)
<div class="js-radio-toggle-group">
<fieldset>
<legend class="h4">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"
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"
id="textinput2" value="" name="text2"
type="text">
</div>
</div>
</div>
</li>
</ul>
</fieldset>
</div>For at initialisere collapse funktionaliteten på en checkbox skal input[type=checkbox] have følgende:
- Klassen
'js-checkbox-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å tjekboksen er aktiveret. - Hvis man ønsker at tjekboksen skal være valgt fra starten af, skal den have attributten
'checked'. aria-controls="id-of-target-to-collapse"
Det element som skal collapses/expandes skal have følgende:
id=”id-of-target-to-collapse”aria-hidden="true/false"
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. |