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
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:
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. |
Varianter
Hjælpetekst
Lille radioknap
Skjult indhold (Collapse)
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