Skip to main content

Avmerkingsbokser

OBS! NVDA har en bug som gjør at skjermleseren ikke klarer å lese av riktig state på avmerkingsboksen. Den er derfor testet med Chromevox der riktig state blir lest

En avmerkingsboks gir brukeren muligheten til flervalg. Avmerkingsbokser skal følges av en primærknapp. Feilmelding avmerkingsboks skal brukes for å visualisere feil i avmerkingen, dersom dette har skjedd (f.eks. ikke krysset av for et alternativ).

For å style <label>-elementet, skal egne CSS-klasser fra Typografi benyttes.

Normal avmerkingsboks​

Avmerkingsboksen får fokus når den velges med tastaturet.

<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_1"/>
    <label class="detail detail--sml" for="checkbox_1">Input tekst</label>
</div>

Feilmelding avmerkingsboks​

Følgende avmerkingsboks får feilmeldingsfarge og en feilmelding hvis ett av alternativene må være valgt før bruker kan gå videre.

errorDu må huke av dette feltet
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_6" required/>
    <label class="detail detail--sml" for="checkbox_6">Jeg aksepterer vilkårene for...</label>
    <div class="error__box">
        <i class="material-symbols-outlined">error</i>
        <small>Du må huke av dette feltet</small>
    </div>
</div>

Eksempler​

Eksempel for feilmelding​

Marker hvilket felt som MÅ avhukes

errorDu må huke av dette feltet
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_3"/>
    <label class="detail detail--sml" for="checkbox_3">Jeg ønsker å få tilsendt nyhetsbrevet</label>
</div>
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_4"/>
    <label class="detail detail--sml" for="checkbox_4">Jeg aksepterer vilkårene</label>
    <div class="error__box">
        <i class="material-symbols-outlined">error</i>
        <small>Du må huke av dette feltet</small>
    </div>
</div>

Eksempel for "velg minst én"​

"Velg minst én" er forskjellig fra radioknapper, som lar deg bare velge en.

Hvordan kommer du deg til jobb?

errorDu må velge minst en
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_5" required/>
    <label class="detail detail--sml" for="checkbox_5">Til fots</label> 
</div> 
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_6" required/>
    <label class="detail detail--sml" for="checkbox_6">Sykkel</label> 
</div> 
<div class="kv-checkbox">
    <input type="checkbox" id="checkbox_7" required/>
    <label class="detail detail--sml" for="checkbox_7">Kollektivt</label> 
</div> 
<div class="kv-checkbox">
   <input type="checkbox" id="checkbox_8" required/>
   <label class="detail detail--sml" for="checkbox_8">Bil</label> 
</div>
<div class="error__box">
    <i class="material-symbols-outlined">error</i>
    <small>Du må velge minst en</small>
</div>