Radiobutton

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Radioknapper (radio button) brukes hvis brukeren må velge kun ett alternativ fra en liste på fem eller færre. Siden alle alternativene er synlige, kan brukeren enkelt skanne og sammenligne alternativer for å gjøre et passende valg.

EtikettValgfritt

Dette er tekst over avmerkingsboksene.

Radio1

Radio2

Varianter

Radioknappene kommer i standard styling og med ramme (tile styling).

Frittstående radioknapp med og uten ramme.

Vi har flere mulige variasjoner av radioknapper. De kan brukes helt enkelt uten label, eller du kan inkludere inputwrapperen (i Figma heter den radio button group) som inneholder:

Label
Valgfritt- eller obligatorisk-tag
Hjelpetekst
Ekspanderende hjelpetekst
Feilmelding

Farger

Radioknapper skal alltid ha fargen $brand-blue.

Slik bruker du komponenten

Radioknapper skal alltid ha minimum to alternativer. Begrens antall alternativer til fem eller færre for en bedre brukeropplevelse. Hvis du har mer enn fem alternativer, bør du vurdere å bruke Select.

En gruppe radioknapper må ha en god overskrift, og ledeteksten til hver radioknapp må beskrive alternativet.

Label (etikett/ledetekst)

For å fungere godt bør radioknappene ha en kort og tydelig ledetekst (label) og det er mulig å legge til hjelpetekst om nødvendig.

Når du skriver label kan det være greit å huske på at:
Man burde være konsis og konsistent slik at brukeren skjønner hva som forventes av hen
Om mulig: hold deg til 1-3 ord og under 20 bokstaver, inkludert mellomrom
Ikke bruk bare store eller bare små bokstaver
Ikke bruk kolon etter label

Valgfritt-/obligatorisk-tag

Til høyre for label kan du velge enten valgfritt-tag eller obligatorisk-tag. Bruk kun én av variantene i din tjeneste eller løsning for å unngå å forvirre brukeren. Vi anbefaler å markere de valgfrie feltene.

Feilmelding og validering

Hvis feltet er påkrevd eller ikke validerer, vil en feilmelding dukke opp under, som beskriver hva som er galt. Feilmeldingen har tre visuelle indikatorer: en rød ramme, et ikon og selve feilmeldingsteksten. Essensen av hjelpeteksten må også være inkludert i feilmeldingen. Les mer om hvordan du kan skrive en god feilmelding her (ks.no).

Hjelpetekst

Du kan velge å ha hjelpetekst over en gruppe med radioknapper eller hjelpetekst per radioknapp.

Når du skriver hjelpetekst, er det viktig at du:

Bruker store bokstaver i setningstil og skriver teksten i de fleste tilfeller som hele setninger.
Dersom du har veldig lang hjelpetekst eller har behov for å legge til lenker og lignende, bruk den ekspanderende hjelpeteksten.

Hjelpetekst under radioknapp, vanlig styling og med ramme.

Plassering

Plasser radioknapper vertikalt når det er mulig for å eliminere forvirring rundt merking og hvilket alternativ brukeren velger. Horisontal plassering anbefales bare om det er to alternativer eller færre. På samme måte, hvis du bruker lengre etiketter og teksten bryter mellom linjer er vertikalt den foretrukne plasseringen.