Skip to main content

Radioknapp

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

Radioknapper skal benyttes der en bruker kun skal kunne gjøre ett enkelt valg, og ikke flervalg. Ved et nytt valg skal eventuelle tidligere valg fjernes automatisk. Feilmelding radioknapp skal brukes for å visualisere feil i avkrysningen, dersom dette har skjedd (f.eks. ikke krysset av for et alternativ).

For å style <label>-elementet, skal egne CSS-klasser fra Typografi benyttes. I tillegg skal hver gruppe med radioknapper ligge i <fieldset>, og ha en <legend> for å vise at elementene hører sammen. Dette er for at skjermleser skal kunne identifisere beskrivelsen til knappene. Se eksempelbruk under.

Normal radioknapp​

Radioknappene får en fokus sirkel når de velges med tastaturet.

Eksempel på gruppe med radioknapper

<fieldset>
    <legend>Eksempel på gruppe med radioknapper</legend>
    <div class="kv-button__radio">
        <input type="radio" id="radioBtn_1" name="radioGroup1"/>
        <label class="detail detail--sml" for="radioBtn_1">Input tekst</label>
    </div>
    <div class="kv-button__radio">
        <input type="radio" id="radioBtn_2" name="radioGroup1"/>
        <label class="detail detail--sml" for="radioBtn_2">Input tekst</label>
    </div>
</fieldset>

Feilmelding radioknapp​

Følgende radioknapp får feilmeldingsfarge hvis et av alternativene må være valgt før bruker kan gå videre. Feilmelding skal bare dukke opp etter at brukeren har prøvd å gå videre, og skal forsvinne etter et valg er tatt. Knappene skal ikke ha en "Valgt" dot ved feilmelding, og skal gå tilbake til vanlig etter at brukeren har tatt et valg.

Eksempel på gruppe med radioknapper som har feilmelding
errorDu må velge et av alternativene

<fieldset>
    <legend>Eksempel på gruppe med radioknapper som har feilmelding</legend>
    <div class="kv-button__radio">
        <input type="radio" id="invalidRadioBtn_1" name="radioGroup2" required/>
        <label class="detail detail--sml" for="invalidRadioBtn_1">Feilmelding</label>
    </div>
    <div class="kv-button__radio">
        <input type="radio" id="invalidRadioBtn_2" name="radioGroup2" required/>
        <label class="detail detail--sml" for="invalidRadioBtn_2">Input tekst</label>
    </div>
</fieldset>