Checkbox
Release dato: 04.10.2023
Sist oppdatert: 07.07.2025
Checkbox brukes for å gi brukeren mulighet til å krysse av ett eller flere alternativer i en gruppe med valg. Du kan også bruke en enkeltstående checkbox for å be om bekreftelse, for eksempel “Jeg godtar vilkårene” før innsending av et skjema.
Live demo
Relaterte komponenter
Når du må velge kun ett alternativ blant flere.
Når du skal skru noe av eller på, som en innstilling.
Når du skal velge fra en lengre liste med mange alternativer.
Varianter
| Variant | Bruk |
|---|---|
| Standard | Når checkbox står alene eller i en enkel liste |
| Tile (med ramme) | Når du vil gruppere flere checkboxer visuelt. Gir tydelig avgrensning og mer luft |
| Variant | Bruk |
|---|---|
| Enkeltstående | Når checkbox står alene eller i en enkel liste |
| Gruppe | Gruppér checkboxene når du tilbyr flere valg innenfor samme gruppe eller kategori |
Retningslinjer for bruk
Bruk checkbox når
- man har en gruppe med valg innenfor samme kontekst
- valgene ikke utelukker hverandre
- brukeren skal kunne velge ett eller flere alternativer
- en bruker skal ha muligheten til å skru et alternativ på/av (for eksempel “akseptere vilkår” for en tjeneste, eller lignende funksjonalitet)
Unngå checkbox når
- brukeren kun kan velge ett alternativ (bruk radiobutton i stedet)
- det er få alternativer (vurder heller switch eller radiobutton)
- det er mer enn 10 alternativer å velge mellom (vurder å bruke select)
- det er en binær innstilling som kan beskrives som på/av (bruk switch)
Skriv tydelige etiketter
Sørg for at hver checkbox har en klar og konkret etikett. Etiketten skal beskrive hva valget innebærer, ikke bare “Ja” eller “Nei”.
Gjør slik
Unngå
Forskjellen på radiobutton og checkbox
Ikke bruk checkboxer dersom brukeren kun kan velge ett valg (gå heller for radiobuttons)
Gjør slik
Unngå
Opt in, ikke opt out
Checkbox skal alltid brukes som opt-in. Brukeren må selv aktivt krysse av for å gi samtykke (opt in), ikke måtte melde seg av (opt out).
Du skal aldri forhåndsvelge en checkbox for samtykke, for eksempel til å motta nyhetsbrev eller godta vilkår. Dette er et krav i GDPR.
Gjør slik
Unngå
Plassering av checkbox
Plasser checkboxene vertikalt når det er mulig. Det gjør det enklere for brukeren å se hvilket valg som hører til hvilken tekst.
Horisontal plassering bør bare brukes hvis det er to til tre valg, og hvis det gir en mer kompakt løsning.
Har du lange etiketter som kan gå over flere linjer, skal checkboxene alltid plasseres vertikalt for best lesbarhet.
Hvis du har mange valg, bør du liste dem i én kolonne. Da blir det lettere for brukeren å skanne valgene.
Responsivitet
På mobil skal alltid checkboxer ligge vertikalt for optimal lesbarhet.
Husk å teste:
- at teksten brytes riktig på små skjermer
- at grupperte checkboxer (tile) fortsatt er oversiktlige
- at fokusring og klikkeflater fungerer godt på touch
Universell utforming
Skriv en klar, kortfattet og unik label
Alle checkboxer krever en klar, kortfattet og unik label (etikett). For checkboxer uten label, for eksempel de som brukes i en tabell, kreves det fortsatt en skjult etikett for skjermlesere og andre hjelpeteknologier. WCAG 2.1: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels.
Unngå standardvalg
Forhåndsvalgte valg anses som en villedende praksis for alle brukere. Implementer en standard uvalgt tilstand.
Unngå deaktiverte (disabled) checkboxer
Vi anbefaler å unngå disabled på skjemaelementer som radio, checkbox og tekstfelt, fordi det kan skape problemer for tilgjengelighet.
Brukere forstår ofte ikke hvorfor et element er deaktivert. Derfor anbefaler vi å heller vise en feilmelding eller en hjelpetekst, enn å bruke disabled. Hvis du må deaktivere en checkbox, må det være tydelig hvorfor, og hva som må til for å aktivere den igjen.
Tastaturinteraksjoner
Alle tastaturinteraksjoner og ARIA-etiketter må oppfylle tilgjengelighetskriterier.
Bruk fieldset og legend
Bruk fieldset og legend (som inputwrapper tilbyr) ved grupper av avmerkingsbokser.
Les mer om universell utforming av checkbox:
Hvordan du lager universelt utformede webkomponenter og widgeter med ARIA-roller.
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Checkbox | Selve checkboxen |
| 2. Label | Tekst som beskriver valget |
| 3. Hjelpetekst | Forklaring til valget (valgfritt) |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-checkbox.js;import { PktCheckbox } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-checkbox.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-checkbox");Om dere bruker data-testid for å hente ut elementer i
testene, vil attributten videresendes til selve skjemaelementet. Dersom
dere heller ønsker å bruke data-testid på elementet
<pkt-checkbox>, må dere sette attributten
skipForwardTestid på elementet.
Dersom dere skal teste tilstanden på checked bør dere teste
på den visuelle tilstanden med en query mot :checked
istedenfor å teste property .checked. Grunnen til dette har
vi ikke helt klart å komme til bunns i, da det fungerer helt fint med
riktig property i nettleseren. Det kan tenkes at dette kan løses ved å
vente et øyeblikk, om det er helt nødvendig å teste property istedenfor
synlig tilstand.
I
punkt-testing-utils
har vi skrevet testen slik: element.querySelectorAll(':checked').length.
Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
label | string | Tekst (label) |
checkHelptext | string | Hjelpetekst |
name | string | Navn for innsending |
value | string | Verdi |
id | string | ID |
defaultChecked | boolean | Forhåndsvalgt |
checked | boolean | Huket av |
hasTile | boolean | Boks (tile) |
disabled | boolean | Deaktivert |
hasError | boolean | Feil |
isSwitch | boolean | Switch |
labelPosition | rightleft | Posisjon |
hideLabel | boolean | Skjul tekst/label |
requiredTag | Boolean | Viser en merking som indikerer at feltet er påkrevd |
requiredText | string | Tekst som vises i påkrevd-merkingen |
optionalTag | boolean | Viser en merking som indikerer at feltet er valgfritt |
optionalText | string | Tekst som vises i valgfritt-merkingen |
tagText | string | Tekst som vises i en tag ved siden av label |
| Event | Beskrivelse |
|---|---|
change | Returnerer checkboxens verdi når den endres |
Farger
| Element | CSS Variabel |
|---|---|
| Border (tile) | |
| Text | |