RadioButton

ReactSass

Vi bruker radioknapper når vi vil at brukeren skal velge ett av flere alternativ. Bruk helst radioknapper for inntil fire alternativ. Hvis du trenger å gi brukeren flere muligheter enn det, er det ofte bedre med en nedtrekksliste.

<RadioButtonGroup
    legend="Hvordan vil du bli kontaktet?"
    name="kontaktmetode"
    forceCompact={false}
    labelProps={{ variant: "medium" }}
    helpLabel="Hjelpetekst"
    value={selectedValue}
    onChange={(e) => setSelectedValue(e.target.value)}
>
    {choices.map((value) => (
        <RadioButton key={value} value={value}>
            {value}
        </RadioButton>
    ))}
</RadioButtonGroup>

Over radioknappene setter vi normalt inn en tydelig overskrift, som forteller hva det er brukeren skal velge mellom. Radioknappene skal alltid beskrives med en slik overskrift, men den kan i noen tilfeller skjules visuelt. I tillegg skal hver radioknapp alltid ha en kort og tydelig ledetekst til høyre for knappen, som beskriver alternativet.

Du finner et eksempel på radioknapper brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.

Bruk

En gruppe radioknapper kan enten settes opp under eller ved siden av hverandre. Det er mest brukervennlig å sette dem opp vertikalt.

I mange tilfeller er det viktig at brukeren selv velger, uten å bli påvirket av et forhåndsvalg. Da kan vi sette opp radioknapper uten forhåndsvalg.

<RadioButtonGroup
    legend="Fikk du gjort det du skulle?"
    name="fant-du-fram"
    inline={false}
    forceCompact={false}
    labelProps={{ variant: "medium" }}
    value={selectedValue}
    onChange={(e) => setSelectedValue(e.target.value)}
>
    <RadioButton value="y">Ja</RadioButton>
    <RadioButton value="n">Nei</RadioButton>
</RadioButtonGroup>

Der hvor det er mindre viktig at brukeren velger selv bør en av radioknappene alltid være valgt på forhånd. Det kan være det alternativet som de fleste vil velge, eller det som har minst følger for brukeren.

<RadioButtonGroup
    legend="Velg prisvisning"
    name="prisvisning"
    inline={false}
    forceCompact={false}
    labelProps={{ srOnly: true }}
    value={selectedValue}
    onChange={(e) => setSelectedValue(e.target.value)}
>
    {choices.map((value) => (
        <RadioButton key={value} value={value}>{value}</RadioButton>
    ))}
</RadioButtonGroup>

Tekst og validering

Bruk prinsippene for skjemadesign når du velger størrelse på overskriften til en gruppe radioknapper. Skriv en kort og tydelig overskrift, som forteller hva brukeren skal velge. Hvis det er behov for det, kan vi legge inn en hjelpetekst under gruppen, for å forklare mer.

Hvis radioknappene ikke validerer, viser systemet en feilmelding som forklarer hva som er galt. Feilmeldingen erstatter en eventuell hjelpetekst, så den må eventuelt gjenta det viktigste fra hjelpeteksten.

Eksempel fra helsevurdering:

• Hjelpetekst: Velg om du har hatt diagnosen de siste 5, 10 eller 15 årene.
• Feilmelding: Du har ikke valgt hvor lenge du har hatt diagnosen.