Radio

<adb-radio> lar brukeren velge ett alternativ i en gruppe. Brukes sammen med <adb-radio-group> for gjensidig eksklusivitet.

Bruk avkrysningsboks når brukeren kun skal kunne gjøre flere valg i listen.

Deaktivert

Dersom radiovalget er deaktivert skal musepekeren endres til å være et stoppsymbol for å indikere at valget ikke kan gjøres.

Eksempel

Alternativ AAlternativ BAlternativ C

Tilstander

Valgt

Valg

Ikke valgt

Valg

Deaktivert

Du kan ikke velge megDu kan ikke velge meg

Med beskrivelse

Bruk description-attributtet eller description-sloten for å gi tilleggsinformasjon.

Beviselig

Med teller (counter)

Bruk counter-sloten for å vise et antall eller badge ved siden av etiketten.

Valg 1 12Valg 2 34Valg 3 56

Gruppering

Vertikal (standard)

Alternativ AAlternativ BAlternativ C

Horisontal

Alternativ AAlternativ BAlternativ C

Deaktivert gruppe

Alternativ AAlternativ BAlternativ C

API — <adb-radio>

Egenskaper (Properties)

Egenskap	Attributt	Type	Standard	Beskrivelse
checked	checked	boolean	false	Om radioknappen er valgt
disabled	disabled	boolean	false	Deaktiverer interaksjon
value	value	string	''	Verdi sendt med skjema
name	name	string	''	Skjemanavn
description	description	string	''	Hjelpetekst under etiketten

Slots

Slot	Beskrivelse
(default)	Etikettekst
description	Hjelpetekst (alternativ til attributtet)
counter	Badge/teller til høyre for etiketten

CSS Parts

Part	Beskrivelse
control	Den visuelle radiosirkelen
label	Etikettekst-wrapperen
description	Beskrivelsestekst-wrapperen

Hendelser (Events)

Hendelse	Beskrivelse
change	Utløses når valgt-tilstand endres
input	Utløses ved brukerinteraksjon

API — <adb-radio-group>

Egenskaper (Properties)

Egenskap	Attributt	Type	Standard	Beskrivelse
label	label	string	''	Gruppens ledetekst (vises som legend)
value	value	string	''	Verdien til den valgte radioknappen
name	name	string	''	Felles skjemanavn for alle radioknapper
orientation	orientation	'vertical' | 'horizontal'	'vertical'	Retning på oppsettet
disabled	disabled	boolean	false	Deaktiverer hele gruppen

Slots

Slot	Beskrivelse
(default)	<adb-radio>-barn

Hendelser (Events)

Hendelse	Beskrivelse
change	Utløses når valgt verdi endres

Universell utforming (WCAG 2.1 AA)

• Bruker nativ <input type="radio"> i en <label> for full tilgjengelighet
• <adb-radio-group> rendrer en <fieldset> med role="radiogroup" og <legend>
• Synlig fokusring ved tastaturnavigasjon (focus-visible)
• Tilstrekkelig fargekontrast i alle tilstander (lys og mørk modus)
• Støtter aria-label for tilfeller uten synlig etikett

Installasjon

npm install @artsdatabanken/components

// Full bundle
import '@artsdatabanken/components';

// Kun radio (tree shaking)
import '@artsdatabanken/components/radio';
import '@artsdatabanken/components/radio-group';

<adb-radio-group label="Velg" name="valg" value="a">
  <adb-radio value="a">Alternativ A</adb-radio>
  <adb-radio value="b">Alternativ B</adb-radio>
</adb-radio-group>