SKJEMAELEMENTER

Radio button

npmv8.3.0

Radio buttons lar brukerne velge kun ett alternativ fra en liste over valg.

npm install @entur/form

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

Varianter

Radio

<Radio /> brukes når man har to eller flere motstridende valg å velge mellom. Må brukes inni en <RadioGroup />. <RadioGroup /> lar deg gruppere flere radio buttons under en overskrift. Du kan spesifisere valgt verdi via value-propen, og lytte på endringer med onChange på toppnivå. name-propen blir propagert ned til hver av <Radio />-elementene, så du slipper å gjøre dette manuelt.

Retningslinjer

Brukes i tilfeller der brukeren kun kan velge ett alternativ. En radioknapp skal være venstrejustert i skjemaer. Den skal alltid stå foran tilhørende ledetekst, og bør aldri stå alene. Valgene bør stå under hverandre i en liste. Dersom du ønsker å vise valgene ved siden av hverandre på en linje, anbefales det heller å bruke Choice Chips.

Bruk Checkboxes hvis brukerne har mulighet til å velge flere alternativer fra listen. Om du har flere enn 5 valg, vurder å bruk en Dropdown med single select funksjon istedet.

Hvis du har mange radioknapper, 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 radioknapper ved siden av hverandre og 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:

Eksempel

Readonly på radiobuttons settes på gruppenivå i RadioGroup

Props

Radio

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

Denne komponenten har ingen props

RadioGroup

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

Denne komponenten har ingen props