Checkbox

Status

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

Om komponenten

Avmerkingsbokser (checkbox) brukes for Ä gi brukeren mulighet til Ä krysse av flere alternativer i en gruppe med valg. Avmerkingsbokser kan ogsÄ brukes til Ä vise et enkelt alternativ som krever ytterligere aksept eller bekreftelse, for eksempel fÞr innsending av skjema eller lignende.

Varianter

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

EnkeltstÄende avmerkingsboks med og uten ramme

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

  • Label
  • Valgfritt- eller obligatorisk-tag
  • Hjelpetekst
  • Ekspanderende hjelpetekst
  • Feilmelding
En gruppe avmerkingsbokser brukes ofte for Ă„ la en bruker velge flere valg innenfor en gruppe eller kategori.

Farger

Avmerkingsbokser skal alltid ha fargen $brand-blue.

Slik bruker du komponenten

Som nevnt kan du enten velge Ä bruke avmerkingsboksen enkeltstÄende, eller inkludere label og hjelpetekst.

EnkeltstÄende avmerkingsboks

EnkeltstÄende avmerkingsbokser brukes ofte til Ä bekrefte eller godta handlinger eller vilkÄr. I motsetning til radioknapper, kan en avmerkingsboks brukes til Ä velge eller oppheve valg fÞr bekreftelse. Det gir mulighet for brukeren til Ä vurdere valget sitt fÞr innsending.

Gruppe med avmerkingsbokser

Gruppér avmerkingsboksene nÄr du tilbyr flere valg innenfor samme gruppe eller kategori.

Avmerkingsbokser brukes ofte i gruppe for Ă„ la en bruker velge flere valg innenfor en gruppe.
Avmerkingsbokser i gruppe med ramme.

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

Label (etikett/ledetekst)

For Ă„ fungere godt bĂžr avmerkingsboksen 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 avmerkingsbokser eller hjelpetekst per avmerkingsboks.

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 avmerkingsboks.
Hjelpetekst under label, bÄde vanlig og ekspanderende.

Plassering

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

PĂ„ mobil skal alltid avmerkingsbokser ligge vertikalt for optimal lesbarhet.

NĂ„r passer det Ă„ ta i bruk avmerkingsboks?

  • NĂ„r man har en gruppe med valg innenfor samme kontekst
  • NĂ„r brukeren skal kunne velge ett eller flere alternativer
  • NĂ„r en bruker skal ha muligheten til Ă„ skru et alternativ pĂ„/av (for eksempel “akseptere vilkĂ„r” for en tjeneste, eller lignende funksjonalitet)

Og nÄr bÞr det unngÄs?

  • NĂ„r du har mer enn 10 alternativer Ă„ velge mellom (vurder Ă„ bruke Select i stedet hvis bruksomrĂ„det tillater det).
  • Dersom det bare er mulig Ă„ velge ett alternativ fra listen, bruk Radio buttons i stedet.

GjĂžr slik/ikke gjĂžr slik

Opt in, ikke opt out

Ikke bruk avmerkingsbokser dersom brukeren kun kan velge ett valg (gÄ heller for radio buttons)

Anatomi

EnkeltstÄende avmerkingsboks

  1. Avmerkingsboks
  2. Valgalternativ
  3. Hjelpetekst

Gruppe med avmerkingsbokser

  1. Etikett/ledetekst
  2. Valgfritt-/obligatorisk-tag
  3. Hjelpetekst
  4. Ekspanderende hjelpetekst
  5. Avmerkingsbokser med valgalternativ