Avkrysningsboks (Checkbox)

<adb-checkbox> lar brukeren velge ett eller flere alternativer. Komponenten støtter tilstandene avkrysset, ikke avkrysset, indeterminate (delvis valgt), og deaktivert.

Bruk checkbox når brukeren skal kunne velge flere ting i en liste. Bruk radiobutton når brukeren kun skal kunne gjøre ett valg i listen.

Deaktivert

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

Eksempel

Velg meg

Tilstander

Avkrysset

Velg meg

Indeterminate

Brukes for «velg alle»-kontroller der noen, men ikke alle, undervalg er avkrysset.

Velg alle

Deaktivert

Du 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.

Velg 1 00

Alternativ med veldig lang tekst som bryter over flere linjer 00

Velg 3 00

Velg 4 00

Gruppe med blandede tilstander

Velg meg

Du kan ikke velge meg

API

Egenskaper (Properties)

Egenskap	Attributt	Type	Standard	Beskrivelse
`checked`	`checked`	`boolean`	`false`	Om boksen er avkrysset
`indeterminate`	`indeterminate`	`boolean`	`false`	Delvis valgt tilstand (for «velg alle»-mønstre)
`disabled`	`disabled`	`boolean`	`false`	Deaktiverer interaksjon
`value`	`value`	`string`	`'on'`	Verdi sendt med skjema når avkrysset
`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 avkrysningsboksen
`label`	Etikettekst-wrapperen
`description`	Beskrivelsestekst-wrapperen

Hendelser (Events)

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

Universell utforming (WCAG 2.1 AA)

Bruker nativ <input type="checkbox"> i en <label> for full tilgjengelighet
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
Indeterminate-tilstand kommuniseres via den native indeterminate-egenskapen

Installasjon

npm install @artsdatabanken/components

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

// Kun checkbox (tree shaking)
import '@artsdatabanken/components/checkbox';

<adb-checkbox>Velg meg</adb-checkbox>
<adb-checkbox checked description="Med hjelpetekst">Alternativ</adb-checkbox>
<adb-checkbox>Med teller <span slot="counter">12</span></adb-checkbox>