Gå til hovedinnhold
KOMPONENTER

Radio button

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

Velg billettype

Komponenter

Radio

NavnTypePåkrevd?Beskrivelse
ref((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null
keystring | number

<Radio /> brukes når man har to eller flere motstridende valg å velge mellom. Må brukes inni en <RadioGroup />.

RadioGroup

NavnTypePåkrevd?Beskrivelse
namestring

Navnet til radiogruppen.

labelstring

Overskrift over radiogruppen

valuestring

Verdien til den valgte radioknappen

childrenReactNode

Radioknappene sendes inn som children

onChange(e: ChangeEvent<HTMLInputElement>) => void

En callback som blir kalles hver gang en radioknapp klikkes på

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

Innafor
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.
Uttafor
Du bør unngå å plassere radioknapper ved siden av hverandre og i flere kolonner.