Hopp til innhold

Checkbox

Vi bruker avmerkingsbokser når vi vil gi brukerne en liste med valg, der de kan velge ett eller flere alternativer. Vi bruker også enkeltstående avmerkingsbokser der brukere må bekrefte noe.

Hvordan kan vi kontakte deg?

Vi bruker flere avmerkingsbokser sammen i en FieldGroup når vi vil gi brukerne en liste med valg, der de kan velge etter eller flere alternativer. Vi anbefaler at du plasserer valgene under hverandre. Standard tilstand for avmerkingsbokser er ikke valgt.

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

En avmerkingsboks som står alene trenger ikke noen overskrift, så lenge ledeteksten er god og beskrivende. Når en avmerkingsboks står alene, er det gjerne for å bekrefte noe, for eksempel: "Jeg bekrefter at opplysningene jeg har gitt er riktige".

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

Riktig

Enkeltstående avmerkingsboks med beskrivende ledetekst

Feil

Lite beskrivende ledetekst uten overskrift

Tekst og validering

Velg størrelse på overskriften til en gruppe avmerkingsbokser etter prinsippene for skjemadesign. Ha en kort og tydelig overskrift, som beskriver hva brukeren skal velge. Hvis du trenger å gi mer forklaring, kan du sette en hjelpetekst under gruppen.

Hvis avmerkingsboksene ikke validerer, vises det en feilmelding som forklarer hva som er galt. Denne feilmeldingen erstatter en eventuell hjelpetekst du har der fra før, og bør formuleres slik at brukeren både får viktig informasjon fra hjelpeteksten, og får vite hva som er feil.

Hvordan kan vi kontakte deg?
Du må velge minst én kontaktmetode hvor vi kan sende viktige beskjeder

Riktig

Informasjon i hjelpetekst

Hvordan kan vi kontakte deg?
Du må velge

Feil

Lite hjelp å få fra feilmeldingen

React API

Her finner du en oversikt over props på komponentene i pakken.