Checkbox

npm install @entur/form

@import '@entur/form/dist/styles.css';

Varianter

Checkbox

Checkbox inneholder komponentene Checkbox og Fieldset. Fieldset lar deg gruppere flere Checkbox-er sammmen under en overskrift. Du kan sette en ledetekst/overskrift med label-propen.

Les mer om hvordan du bruker html-taggen fieldset på sidene til mdn web docs;

Retningslinjer

Brukes i tilfeller der det er en liste over alternativer, og brukeren kan velge ett eller flere alternativer. En checkbox skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende label tekst, og bør aldri stå alene.

Hvis brukerne bare kan velge ett alternativ fra listen, er det mer passende å bruke Radioknapper. Om du ønsker at valget blir gjenspeilet eller lagret med en gang, bruk heller en Switch istedenfor.

Indeterminate

Det finnes tilfeller der en checkbox hverken er på eller av. Det er typisk når man bruker en checkbox til å velge en rekke andre checkboxes.

Her har du et eksempel hvor det brukes. Prøv å velg ingen, alle eller en blanding.

Dersom det er mange checkboxes, bør du liste dem under hverandre i en kolonnegruppe slikt at det gjør det enkelt for brukeren å skanne raskt gjennom listen.

Du bør unngå å plassere checkboxes i flere kolonner.

Universell utforming

Bruk av disabled og readonly

Readonly for visning av ikke-redigerbare verdier

Readonly har flere fordeler enn disabled som tilgjengelighet, fokus, og verdien kan sendes med i form-data.

Derfor bruk readonly når:

• Feltet skal vises i skjemaet, men ikke endres av brukeren
• Verdien skal sendes inn i skjemaet
• Du ønsker å indikere at valget er «låst» eller forhåndsbestemt

Problemer med disabled-elementer:

Vi anbefaler å unngå disabled på skjemaelementer som radio, checkbox og tekstfelt, fordi det kan skape problemer for tilgjengelighet:

• Manglende tilbakemelding. Deaktiverte elementer er ofte fullstendig inaktive og gir ingen respons når brukeren interagerer med dem. Dette kan føre til forvirring blant brukere som ikke forstår hvorfor elementet ikke virker. Det kan også føre til at brukere av skjermlesere ikke får en indikasjon på hvorfor knappen er inaktiv.

• Utilgjengelighet for hjelpemiddelteknologi. Deaktiverte elementer kan bli hoppet over av hjelpemiddelteknologi som skjermlesere, fordi slike elementer vanligvis fjernes fra fokusrekkefølgen. Dette betyr at brukere som navigerer med tastatur eller skjermlesere, kanskje aldri oppdager at elementet eller informasjonen eksisterer.

• Dynamisk oppdatering av status. Hvis et element aktiveres eller deaktiveres basert på brukerens handlinger, må disse endringene kommuniseres effektivt til brukeren. Mange implementasjoner av deaktiverte elementer informerer ikke brukere om statusendringen, noe som skaper trøbbel for personer som navigerer med skjermlesere eller andre hjelpemidler.

• Forvirrende designmønstre. Brukere forstår ofte ikke hvorfor et deaktivert element ikke kan brukes, spesielt hvis det ikke finnes tydelig informasjon om hva som må gjøres for å aktivere elementet igjen. Dette kan føre til frustrasjon, spesielt for brukere med kognitive eller læringsrelaterte utfordringer.

Dersom du likevel trenger å bruke deaktivert element

• Bruk tydelig hjelpetekst. Forklar på forhånd hva som må gjøres for å aktivere knappen. Dette kan gjøres gjennom visuelle hjelpemidler eller tekst nær knappen. Og/eller aria-label for teknologiske hjelpemidler.

• Oppretthold kontrast. Selv om feltet ikke er interaktiv, bør den ha tilstrekkelig kontrast til å være synlig for alle brukere. Bruk alternative visuelle signaler som ikke senker kontrasten, som et ikon eller en stilendring som fortsatt oppfyller kontrastkravene.

• Vis alltid knappen som klikkbar. Gjør feltet mulig å klikke på, men gi tilbakemelding når den ikke kan utføre en handling, for eksempel via en alert eller melding som forklarer hvorfor handlingen ikke er mulig.

Kilder:

• 3.3.1 Identifikasjon av feil
• 4.1.2: Navn, rolle, verdi
• 1.3.1: Informasjon og relasjoner
• 4.1.3: Statusmeldinger

Eksempel

Props

Checkbox

import { Checkbox } from '@entur/form';

Denne komponenten har ingen props

Fieldset

import { Fieldset } from '@entur/form';

Denne komponenten har ingen props