Checkbox

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).

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

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.

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.

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

2. Avmerkingsboks
3. Valgalternativ
4. Hjelpetekst

Gruppe med avmerkingsbokser

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